jQuery UI Widgets › Forums › Chart › seriesGroups from different value in column
Tagged: Angular chart, chart, jquery chart, jqxChart, json, php, series, seriesGroups
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 1 month ago.
-
Author
-
Hi,
I would like to know how can I plot each Item column as a series in a line chart, and DateVal as xAxis…
[Table: myTable]
Item DateVal Val1 Val2 Val3 Val4 A 01/01/2015 1 23 45 67 A 02/01/2015 5 54 103 152 B 01/01/2015 43 8 -27 -62 B 02/01/2015 53 98 143 188 C 01/01/2015 21 12 3 -6 C 02/01/2015 53 15 -23 -61 A 03/01/2015 75 72 69 66 A 04/01/2015 87 75 63 51 B 03/01/2015 32 12 -8 -28 C 03/01/2015 68 98 128 158
My php backend is very easy: I return a json encoded string from a sql query like “select * from myTable”.
This is the json output:[ { "Name":"A", "DateVal":"01/01/2015", "Val1":1, "Val2":23, "Val3":45, "Val4":67 }, { "Name":"A", "DateVal":"02/01/2015", "Val1":5, "Val2":54, "Val3":103, "Val4":152 }, { "Name":"B", "DateVal":"01/01/2015", "Val1":43, "Val2":8, "Val3":-27, "Val4":-62 }, { "Name":"B", "DateVal":"02/01/2015", "Val1":53, "Val2":98, "Val3":143, "Val4":188 }, { "Name":"C", "DateVal":"01/01/2015", "Val1":21, "Val2":12, "Val3":3, "Val4":-6 }, { "Name":"C", "DateVal":"02/01/2015", "Val1":53, "Val2":15, "Val3":-23, "Val4":-61 }, { "Name":"A", "DateVal":"03/01/2015", "Val1":75, "Val2":72, "Val3":69, "Val4":66 }, { "Name":"A", "DateVal":"04/01/2015", "Val1":87, "Val2":75, "Val3":63, "Val4":51 }, { "Name":"B", "DateVal":"03/01/2015", "Val1":32, "Val2":12, "Val3":-8, "Val4":-28 }, { "Name":"C", "DateVal":"03/01/2015", "Val1":68, "Val2":98, "Val3":128, "Val4":158 } ]
Do I have to chage the json output somehow to fit it in the cahrt’s seriesGroups?
Thank you and merry christmas.Saludos.
Hi rmartimo,
Each data point in your data source (JSON) should be based on the x-axis datafield – DateVal. I think something like this should work:
[{ "DateVal": "01/01/2015", "ValA1": 1, "ValA2": 23, "ValA3": 45, "ValA4": 67, "ValB1": 43, "ValB2": 8, "ValB3": -27, "ValB4": -62, "ValC1": 21, "ValC2": 12, "ValC3": 3, "ValC4": -6 }]
Or, alternatively (if you would like to use datafield mapping):
[{ "DateVal": "01/01/2015", "A": { "Val1": 1, "Val2": 23, "Val3": 45, "Val4": 67 }, "B": { "Val1": 43, "Val2": 8, "Val3": -27, "Val4": -62 }, "C": { "Val1": 21, "Val2": 12, "Val3": 3, "Val4": -6 } }]
You can also take a look at how the data is formatted in the jqxChart demos or experiment and create your chart with our Chart Studio.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.