jQuery UI Widgets › Forums › Chart › ValueAxis Max and Min

Tagged: , , , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Al 9 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    ValueAxis Max and Min Posts
  • December 3, 2014 at 10:53 pm ValueAxis Max and Min #63747

    Al
    Participant

    I am confused as to how the value axis displays. I have the following setting:

    type: ‘line’,
    columnsGapPercent: 50,
    alignEndPointsWithIntervals: true,
    valueAxis:
    {
    minValue: 2065.25,
    maxValue: 2075.25,
    unitInterval: 0.25,
    formatSettings:
    {
    decimalPlaces: 2
    },
    description: ‘Index Value’
    },

    I would expect the axis to be 2075.25 – 2065.25 = 10 points long but it isn’t It seems to be sizing base don the data points int eh source array. Can I change that behavior and explicitly set the Value Axis height?

    Thanks again.

    December 4, 2014 at 6:37 am ValueAxis Max and Min #63761

    Dimitar
    Participant

    Hello Al,

    We tested but did not experience any issues with the valueAxis minValue, maxValue and unitInterval. Here is our example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data
            var sampleData = [
                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 30.5,
                                maxValue: 40.5,
                                unitInterval: 0.5,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };

            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 800px" />
</body>
</html>

    Please make sure you are using the latest version of jQWidgets (3.6.0).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    December 4, 2014 at 4:44 pm ValueAxis Max and Min #63793

    Al
    Participant

    Dimitar,

    The difference seems to be that this is not realtime. i.e. the data set is not changing. My issue boils down to:

    say I have a set of 100 last points that I want to displace, so i roll off the old point as soon as new ones arrive and refreshdata on the grid, what sets the value of the minValue and maxValue on the value axis. It seems to be jqx is computing a value based on the range of the data in the source, is that true? If not then what am i doing wrong. It is DEFINATELY not using the values specified in the settings:

    {
    type: ‘line’,
    columnsGapPercent: 50,
    alignEndPointsWithIntervals: true,
    valueAxis:
    {
    minValue: 2000.25,
    maxValue: 2100.25,
    unitInterval: 0.125,
    formatSettings:
    {
    decimalPlaces: 3
    },
    description: ‘Index Value’
    },

    I appreciate your attention to this matter.

    December 5, 2014 at 3:15 am ValueAxis Max and Min #63805

    Al
    Participant

    Sorry, my bad again. I was not setting the unitInterval correctly.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.