jQuery UI Widgets › Forums › Chart › Different line series with same dataField
Tagged: Angular chart, angular2 chart, bootstrap chart, javascript chart, jquery chart, jqwidgets chart, jqxChart, jqxChart multiple lines
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 8 years, 1 month ago.
-
Author
-
My data is as below:
{ "data": [ { "dataDate": "2016-09-22T16:00:00Z", "eSum": 40.1, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-23T16:00:00Z", "eSum": 106.4, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-24T16:00:00Z", "eSum": 26.5, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-25T16:00:00Z", "eSum": 55, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-26T16:00:00Z", "eSum": 0.2, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-30T16:00:00Z", "eSum": 35.2, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-01T16:00:00Z", "eSum": 91.3, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-02T16:00:00Z", "eSum": 58.3, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-03T16:00:00Z", "eSum": 81.4, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-04T16:00:00Z", "eSum": 72.6, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-05T16:00:00Z", "eSum": 67.7, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-10-06T16:00:00Z", "eSum": 5.7, "inverterSn": "1025KDTU161R0003" }, { "dataDate": "2016-09-22T16:00:00Z", "eSum": 64.3, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-23T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-24T16:00:00Z", "eSum": 38.1, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-25T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-26T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-27T16:00:00Z", "eSum": 8.8, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-28T16:00:00Z", "eSum": 74.4, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-29T16:00:00Z", "eSum": 102.9, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-30T16:00:00Z", "eSum": 78, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-01T16:00:00Z", "eSum": 162.6, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-02T16:00:00Z", "eSum": 110, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-03T16:00:00Z", "eSum": 146.1, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-04T16:00:00Z", "eSum": 127.1, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-05T16:00:00Z", "eSum": 86.5, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-10-06T16:00:00Z", "eSum": 10.2, "inverterSn": "1025KDTU161R0007" }, { "dataDate": "2016-09-22T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-23T16:00:00Z", "eSum": 61.1, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-24T16:00:00Z", "eSum": 4.6, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-25T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-26T16:00:00Z", "eSum": 0, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-27T16:00:00Z", "eSum": 27.7, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-28T16:00:00Z", "eSum": 43, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-29T16:00:00Z", "eSum": 39.6, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-09-30T16:00:00Z", "eSum": 30.7, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-01T16:00:00Z", "eSum": 56.5, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-02T16:00:00Z", "eSum": 35.8, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-03T16:00:00Z", "eSum": 49.7, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-04T16:00:00Z", "eSum": 44.1, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-05T16:00:00Z", "eSum": 42.3, "inverterSn": "1025KDTU161R0010" }, { "dataDate": "2016-10-06T16:00:00Z", "eSum": 3.2, "inverterSn": "1025KDTU161R0010" } ], "error": "SUCCESS", "message": "" }
The inverterSn has 3 different values. Each inverterSn has its line based on the field eSum.
When I apply the data into jqxChart, I meet a problem.
Based on http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-working-with-chart-series.htm
, I found that in jqxChart, different lines seem to be built with different datafields.var settings = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise", padding: { left: 5, top: 5, right: 50, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, xAxis: { dataField: 'Day', valuesOnTicks: false }, valueAxis: { minValue: 0, maxValue: 100, unitInterval: 10, title: {text: 'Time in minutes'} }, colorScheme: 'scheme01', seriesGroups: [ { type: 'bubble', series: [ { dataField: 'George', displayText: 'George'} ] }, { type: 'line', series: [ { dataField: 'Keith', displayText: 'Keith'}, { dataField: 'Erica', displayText: 'Erica'}, ] } ] };
But mine is to use same datafield with different keys (inverterSn in this instance).
So, what should I do so that jqxChart can display three lines correctlly?
ThanksHello wureka,
I am not sure what exactly try to achieve.
But that I thing is to create new data that collect all similar content of the datafield (‘inverterSn’) in one field for ‘key’ (ex: “1025KDTU161R0010”) and the array of values.
Please, take a look at this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_line_series_symbol_type.htm?lightBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.