jQWidgets Forums

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

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

Author

Multiple lines from data Posts

August 22, 2013 at 7:22 pm Multiple lines from data #27480

Member

Hi,
The examples I’ve seen of multiple lines on the same chart all know in advance how many lines are needed.
We have a data source that could have any number of lines from 1 to 20 or more depending on the user.
Sample JSON below has Count, Date, and PlannerCode attributes. I’d like to generate a chart with a line of the Count for each PlannerCode, over time.

How do I set up the chart for this?

[
{
“Count”: 7,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 6,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 2,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 4,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 3,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 5,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 3,
“Date”: “/Date(1377121277917-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 2,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 7,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 4,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 5,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 3,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 6,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 3,
“Date”: “/Date(1377121284977-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 4,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 7,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 3,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 2,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 6,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 5,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 3,
“Date”: “/Date(1377121287227-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 4,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 5,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 2,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 3,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 7,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 6,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 3,
“Date”: “/Date(1377121289147-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 7,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 5,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 4,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 2,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 6,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 3,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 3,
“Date”: “/Date(1377121291170-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 4,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 7,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 3,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 2,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 2,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 6,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 5,
“Date”: “/Date(1377121411343-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 2,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 7,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 2,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 5,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “NANCY”
},
{
“Count”: 2,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 4,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 6,
“Date”: “/Date(1377121422290-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 7,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “SAM”
},
{
“Count”: 2,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “Otto”
},
{
“Count”: 4,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “BRENDA”
},
{
“Count”: 2,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “TOM”
},
{
“Count”: 2,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “CINDY”
},
{
“Count”: 5,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “JOE”
},
{
“Count”: 5,
“Date”: “/Date(1377121470390-0700)/”,
“PlannerCode”: “NANCY”
}
]

August 23, 2013 at 9:15 pm Multiple lines from data #27598

Peter Stoev

Keymaster

Hi timtate,

In order to display a Line for each PlannerCode, you will need to create a unique Line Serie associated to the PlannerCode’s Value i.e the data should be transformed to something line: Sam: 7.

The sample below demonstrates the process:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Line Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            {
                "Count": 7,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121277917-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121284977-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121287227-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121289147-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121291170-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 3,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121411343-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "NANCY"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 6,
                "Date": "/Date(1377121422290-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 7,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "SAM"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "Otto"
            },
            {
                "Count": 4,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "BRENDA"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "TOM"
            },
            {
                "Count": 2,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "CINDY"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "JOE"
            },
            {
                "Count": 5,
                "Date": "/Date(1377121470390-0700)/",
                "PlannerCode": "NANCY"
            }
            ];
            var series = [
            ];
            var uniquePlannerCode = [];
            var datafields = [];
            datafields.push({ name: "Count", type: "number" });
            datafields.push({ name: "Date", type: "date" });
            datafields.push({ name: "PlannerCode", type: "string" });
            for (var i = 0; i < data.length; i++) {
                var code = data[i]["PlannerCode"];
                if (!uniquePlannerCode[code]) {
                    uniquePlannerCode[code] = true;
                    series.push({ dataField: code, displayText: code });
                    // Create a Data Field for Each PlannerCode
                    datafields.push({ name: code, type: "number" });
                }
                // Add the PlannerCode's Real Value to the Array and Associate it to the Count
                data[i][code] = data[i].Count;
            }
            for (var i = 0; i < data.length; i++) {
                var code = data[i]["PlannerCode"];
                for (obj in uniquePlannerCode) {
                    if (code !== obj) {
                        data[i][obj] = null;
                    }
                }
            }
            // prepare the data
            var source =
            {
                datatype: "local",
                localdata: data,
                datafields: datafields
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
         
            // prepare jqxChart settings
            var settings = {
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Date',
                        type: 'date',
                        baseUnit: 'second',
                        showTickMarks: true,
                        tickMarksColor: '#888888',
                        showGridLines: true,
                        gridLinesColor: '#888888',
                        valuesOnTicks: true,
                        unitInterval: 10,
                        gridLinesInterval: 10,
                        tickMarksInterval: 10
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'spline',
                            valueAxis:
                            {
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: series
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">
    </div>
</body>
</html>

The chart displays the points that match the Date and Count.

Best Regards,
Peter Stoev

August 27, 2013 at 4:27 pm Multiple lines from data #27810

timtate

Member

Hi Peter,
After working with this example, we do get a chart, but it only shows the points. I’ve tried setting the type to both “line” and to “spline” but still just get scattered points. Is there another switch I need to get the lines to show?

August 29, 2013 at 8:50 pm Multiple lines from data #27992

timtate

Member

To help anyone else with mysterious “where’s my lines?” issues, you need to sort by series, then date. Interleaved data like above will leave you with just points plotted on the chart, as it thinks each point is the start of a “new” line.

So for example, in the data above, all “BRENDA” data should come together, then “CINDY” data, then “JOE”, etc.

Author

Posts

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

You must be logged in to reply to this topic.