Bind chart source to array of arrays - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: "array of arrays", Angular chart, array, chart, data source, jquery chart, jqxChart, source

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

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

Author

Bind chart source to array of arrays Posts

June 30, 2015 at 3:51 am Bind chart source to array of arrays #73168

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.

June 30, 2015 at 5:33 am 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/

June 30, 2015 at 10:42 pm 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.

July 1, 2015 at 8:03 am Bind chart source to array of arrays #73231

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/

Author

Posts

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

You must be logged in to reply to this topic.