jQWidgets Forums

jQuery UI Widgets › Forums › Chart › 2 value axes

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    2 value axes Posts
  • December 17, 2014 at 5:31 am 2 value axes #64281

    Al
    Participant

    I am looking for an example of 2 value axes to display 2 time series on a line chart. is there an example, where I can have a right and a left value axis (y axis) and a series per axis displayed on the same chart?

    thanks

    December 17, 2014 at 8:48 am 2 value axes #64301

    Nadezhda
    Participant

    Hello Al,

    Please, find the following example which shows how to use jqxChart with two Y axes (on left and right side).

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var days = [
                { Day: 'Monday' },
                { Day: 'Tuesday' },
                { Day: 'Wednesday' },
                { Day: 'Thursday' },
                { Day: 'Friday' },
                { Day: 'Saturday' },
                { Day: 'Sunday' }
            ];
            var Keith = [
                 { Minutes: 30 },
                 { Minutes: 25 },
                 { Minutes: 30 },
                 { Minutes: 35 },
                 { Minutes: 20 },
                 { Minutes: 30 },
                 { Minutes: 60 }
            ];
            var George = [
                 { Minutes: 25 },
                 { Minutes: 30 },
                 { Minutes: 25 },
                 { Minutes: 45 },
                 { Minutes: 25 },
                 { Minutes: 30 },
                 { Minutes: 90 }
            ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 40, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: days,
                xAxis:
                    {
                        dataField: 'Day',
                        showGridLines: true
                    },
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'stackedline',
                            valueAxis:
                            {
                                position: 'left',
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            source: Keith,
                            series: [
                                  { dataField: 'Minutes', displayText: 'Keith' }
                            ]
                        },
                        {
                            type: 'stackedline',
                            valueAxis:
                            {
                                position:'right',
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888',
                                visible: true
                            },
                            source: George,
                            series: [
                                    { dataField: 'Minutes', displayText: 'George' }
                            ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div style='height: 600px; width: 682px;'>
        <div id='host' style="margin: 0 auto; width: 850px; height: 400px;">
            <div id='jqxChart' style="width: 850px; height: 400px; position: relative; left: 0px; top: 0px;">
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    December 17, 2014 at 2:05 pm 2 value axes #64323

    Al
    Participant

    Thanks

    December 18, 2014 at 6:16 am 2 value axes #64356

    Al
    Participant

    Just one follow up question here. if i were to use a range selector here, how would I specify the datafields for multiple axes?

    thanks,

    December 18, 2014 at 7:11 am 2 value axes #64366

    Nadezhda
    Participant

    Hi Al,

    Please, find the following topic which contains more information about this issue: http://www.jqwidgets.com/community/topic/range-selector-with-several-datafields/.

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.