jQuery UI Widgets Forums Chart Bind chart source to array of arrays

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Bind chart source to array of arrays #73168

    toquehead
    Participant

    I would like to use a local array of arrays as a source for a jqxChart. I can only find examples of array of plain objects.

    Instead of:

    var source = [ 
        { date: somedate, prop: someprop, prop2: anotherprop },
        { date: somedate, prop: someprop, prop2: anotherprop }
    ];

    I want:

    var source = [ 
        [somedate, someprop, anotherprop ],
        [somedate, someprop, anotherprop ]
    ];

    Can you point me to an example of an array of arrays?

    Thanks.

    Bind chart source to array of arrays #73172

    Dimitar
    Participant

    Hello toquehead,

    Here is an example. We hope you find it useful:

    <!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 () {
                var sampleData = [
                    ['Monday', 30, 15, 25],
                    ['Tuesday', 25, 25, 30],
                    ['Wednesday', 30, 20, 25]
                ];
    
                var source = {
                    datafields: [
                        { name: 'Day', type: 'string', map: '0' },
                        { name: 'Keith', type: 'number', map: '1' },
                        { name: 'Erica', type: 'number', map: '2' },
                        { name: 'George', type: 'number', map: '3' }
                    ],
                    datatype: "array",
                    localdata: sampleData
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // 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: dataAdapter,
                    xAxis:
                        {
                            dataField: 'Day',
                            gridLines: { visible: false }
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 30,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    minValue: 0,
                                    maxValue: 100,
                                    unitInterval: 10,
                                    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: 400px" />
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Bind chart source to array of arrays #73217

    toquehead
    Participant

    Thanks.

    Can I do it without a dataAdapter?

    Firstly, I prefer the simpler solution of direct mapping to my 2D array.

    And secondly, in my case, when I use dataAdapter and rangeSelector, dataAdapter goes into an infinite loop (but works fine without the rangeSelector). If I map direct to my data without a dataAdapter, rangeSelector also works fine.

    d.


    Dimitar
    Participant

    Hi d.,

    Data adapter is necessary, because the mapping is done by it. As for the rangeSelector “infinite loop” issue – we were able to reproduce it. Here is a workaround on the matter:

    <!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/jqxchart.rangeselector.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 () {
                var sampleData = [
                    ['Monday', 30, 15, 25],
                    ['Tuesday', 25, 25, 30],
                    ['Wednesday', 30, 20, 25]
                ];
    
                var source = {
                    datafields: [
                        { name: 'Day', type: 'string', map: '0' },
                        { name: 'Keith', type: 'number', map: '1' },
                        { name: 'Erica', type: 'number', map: '2' },
                        { name: 'George', type: 'number', map: '3' }
                    ],
                    datatype: "array",
                    localdata: sampleData
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
                dataAdapter.dataBind();
    
                // 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: dataAdapter.records,
                    xAxis:
                        {
                            dataField: 'Day',
                            gridLines: { visible: false },
                            rangeSelector: {
                                serieType: 'area',
                                dataField: 'Erica',
                                unitInterval: 1,
                                padding: { /*left: 0, right: 0,*/top: 20, bottom: 0 },
                                backgroundColor: 'white',
                                size: 120,
                                gridLines: { visible: false }
                            }
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 30,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    minValue: 0,
                                    maxValue: 100,
                                    unitInterval: 10,
                                    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: 400px" />
    </body>
    </html>

    Best Regards,
    Dimitar

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.