How to format JSON for multi-series data

[Eden]

Hi,

I'd like to plot a line chart with (x,y) data for several different series on the same chart. I'd like to populate the chart with JSON data so that it can automatically update itself with some AJAX. I'm struggling with the TeeChart documentation as to how to format the JSON.

I've been able to get my chart to display with one series, using the following code:

Code: Select all

// This example works with one data series
//require teechart.js
//require teechart-table.js
	
var chart_recorder_performance = new Tee.Chart("canvas_recorder_performance");

//some example data which will eventually be retrieved with an AJAX call instead
data = {
	"series": {
		"point": [
			{ "name": "2012-12-14", "value": 53 },
			{ "name": "2012-12-15", "value": 52 },
			{ "name": "2012-12-16", "value": 50 }
		]
	}
};

chart_recorder_performance.addSeries(new Tee.Line()).loadJSON( { value:JSON.stringify(data) } );
chart_recorder_performance.draw();

However, when I want to display more than one data series, I'm not sure how the JSON should be formatted, and where I should call loadJSON()? The examples I have seen on the TeeChart pages call loadJSON per series. In my case, I don't know how many series I have until I have retrieved the JSON.

So this does not work:

Code: Select all

// This example does not work with two data series
//require teechart.js
//require teechart-table.js
	
var chart_recorder_performance = new Tee.Chart("canvas_recorder_performance");

//some multi-series example data which will eventually be retrieved with an AJAX call instead
data = {
	"series1": {
		"point": [
			{ "name": "2012-12-14", "value": 53 },
			{ "name": "2012-12-15", "value": 52 },
			{ "name": "2012-12-16", "value": 50 }
		]
	},
	"series2": {
		"point": [
			{ "name": "2012-12-13", "value": 30 },
			{ "name": "2012-12-14", "value": 43 },
			{ "name": "2012-12-15", "value": 43 },
			{ "name": "2012-12-16", "value": 42 },
			{ "name": "2012-12-17", "value": 40 }
		]
	}
};


chart_recorder_performance.addSeries(new Tee.Line()).loadJSON( { value:JSON.stringify(data) } );;
chart_recorder_performance.draw();

Could anyone suggest how to format JSON with more than one data series and how to plot it on TeeChart?

Thanks in advance,

Martyn Whitwell.

[Yeray]

Hi Martyn,

We have made some changes in the sources to make it work. The json example that now includes a chart with a bar series, will include a second chart, with three line series:

Code: Select all

<textarea id="jsonXY" rows="20" cols="40" "wrap="off">
{ "chart": [
   {
    "series": {
      "name":"Data 1",
      "color":"Blue",
      "metric":"Y",
      "category":"X",
      "pointer":"rectangle",
      "point": [
          { "value":123, "x": 21 },
          { "value":456, "x": 14 },
          { "value":789, "x": 33 }
      ]
    }
   },
   {
    "series": {
      "name":"Data 2",
      "color":"Red",
      "metric":"Y",
      "category":"X",
      "pointer":"triangle",
      "point": [
          { "value":321, "x": 15 },
          { "value":555, "x": 24 },
          { "value":111, "x":  3 }
      ]
    }
   },
   {
    "series": {
      "name":"Data 3",
      "color":"Green",
      "metric":"Y",
      "category":"X",
      "pointer":"ellipse",
      "point": [
          { "value":321, "x": 35 },
          { "value":555, "x": 17 },
          { "value":111, "x": 23 }
      ]
    }
   }
 ]
}
</textarea>

the changes will be available with the next maintenance release.

[jls]

Any date for next maintenance release?

[Yeray]

Hi,

We published it yesterday.
Find the json updated demo here.