jQWidgets Forums

Tagged: Angular chart, axis, chart, data, Data Format, jquery chart, jqxChart, source

This topic contains 4 replies, has 2 voices, and was last updated by ziggy 9 years, 9 months ago.

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

Author

data source formatting Posts

August 3, 2015 at 9:52 am data source formatting #74426

ziggy

Participant

Hi,

I have the following data:

	DAY1	DAY2	DAY3
KAREN	22	24	45
EMMA	34	18	44
ARTHUR	22	25	46

And I wanted to show it in a line graph where:

* x-axis values are 1, 2 and 3
* y-axis values range is from 10-50
* series contains values for KAREN, EMMA and ARTHUR

Can you suggest a format for the datasource? And how do I refer it in the line chart widget?

Thanks!

Karen

August 3, 2015 at 11:24 am data source formatting #74433

Dimitar

Participant

Hi Karen,

Here is the 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: 1, KAREN: 22, EMMA: 24, ARTHUR: 22 },
                    { Day: 2, KAREN: 24, EMMA: 18, ARTHUR: 25 },
                    { Day: 3, KAREN: 45, EMMA: 25, ARTHUR: 46 }
                ];

            // 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,
                xAxis:
                    {
                        dataField: 'Day',
                        gridLines: { visible: false }
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 10,
                                maxValue: 50,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'KAREN', displayText: 'KAREN' },
                                    { dataField: 'EMMA', displayText: 'EMMA' },
                                    { dataField: 'ARTHUR', displayText: 'ARTHUR' }
                                ]
                        }
                    ]
            };

            // 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/

August 4, 2015 at 8:07 am data source formatting #74496

ziggy

Participant

Thanks Dimitar…but how about if we add dynamic series groups where we cannot hardcode datafield names?

how can we achieve this?

var sampleData = [
                    { Day: 1, KAREN: 22, EMMA: 24, ARTHUR: 22, ROB: 33, ...etc },
                    { Day: 2, KAREN: 24, EMMA: 18, ARTHUR: 25...etc },
                    { Day: 3, KAREN: 45, EMMA: 25, ARTHUR: 46, DAVE: 45, JON: 40, ...., etc }
                ];

August 4, 2015 at 8:34 am data source formatting #74499

Dimitar

Participant

Hi Karen,

This, too, can be achieved. Here is how:

<!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: 1, KAREN: 22, EMMA: 24, ARTHUR: 22, ROB: 33, DAVE: 12 },
                    { Day: 2, KAREN: 24, EMMA: 18, ARTHUR: 25, ROB: 12, JON: 14 },
                    { Day: 3, KAREN: 45, EMMA: 25, ARTHUR: 46, DAVE: 45, JON: 40 }
                ];

            var people = [],
                seriesArray = [];

            for (var i = 0; i < sampleData.length; i++) {
                var currentDay = sampleData[i];
                for (var prop in currentDay) {
                    if (prop !== 'Day') {
                        if (people.indexOf(prop) === -1) {
                            people.push(prop);
                        }
                    }
                }
            }

            for (var j = 0; j < people.length; j++) {
                seriesArray.push({ dataField: people[j], displayText: people[j] });
            }

            // 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,
                xAxis:
                    {
                        dataField: 'Day',
                        gridLines: { visible: false }
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 10,
                                maxValue: 50,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: seriesArray
                        }
                    ]
            };

            // 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/

August 4, 2015 at 9:08 am data source formatting #74501

ziggy

Participant

this is great! thanks for the prompt response Dimitar!

Author

Posts

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

You must be logged in to reply to this topic.