jQuery UI Widgets Forums Chart seriesGroups from different value in column

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • rmartimo
    Participant

    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.


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.