How to format JSON for multi-series data

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
Eden
Newbie
Newbie
Posts: 13
Joined: Fri Apr 13, 2012 12:00 am

How to format JSON for multi-series data

Post by Eden » Thu Dec 13, 2012 9:43 am

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: How to format JSON for multi-series data

Post by Yeray » Fri Dec 14, 2012 10:00 am

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

jls
Newbie
Newbie
Posts: 56
Joined: Mon May 07, 2012 12:00 am
Location: Norway

Re: How to format JSON for multi-series data

Post by jls » Mon Dec 17, 2012 8:50 am

Any date for next maintenance release?

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: How to format JSON for multi-series data

Post by Yeray » Tue Dec 18, 2012 9:46 am

Hi,

We published it yesterday.
Find the json updated demo here.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply