draw one chart with one line for each location

[sksingh20]

I am drawing chart showing temperature from multiple location. I am not able to show all location graph on one chart. Please help.

[sksingh20]

Sample data
[{x: 1613323768000, y: 573, a: 1, b: 20, c: 1, d: 1, e: 11, f: 1, g: 800, h: 612, i: 0, j: 0},
{x: 1613323440000, y: 600, a: 0, b: 20, c: 3, d: 0, e: 12, f: 72, g: 664, h: 468, i: 987, j: 269},
{x: 1613322642000, y: 600, a: 0, b: 20, c: 3, d: 0, e: 12, f: 72, g: 664, h: 468, i: 987, j: 268},
{x: 1613322506000, y: 574, a: 1, b: 20, c: 1, d: 1, e: 11, f: 1, g: 800, h: 612, i: 0, j: 0},
{x: 1613321840000, y: 600, a: 0, b: 20, c: 3, d: 0, e: 12, f: 72, g: 664, h: 468, i: 987, j: 268},
{x: 1613321240000, y: 577, a: 99, b: 21, c: 1, d: 1, e: 11, f: 0, g: 800, h: 612, i: 0, j: 0},
{x: 1613321045000, y: 600, a: 0, b: 20, c: 3, d: 0, e: 12, f: 71, g: 664, h: 468, i: 987, j: 268},
{x: 1613320243000, y: 600, a: 0, b: 21, c: 3, d: 0, e: 12, f: 71, g: 664, h: 468, i: 987, j: 268},
{x: 1613319958000, y: 573, a: 99, b: 21, c: 1, d: 1, e: 11, f: 0, g: 800, h: 612, i: 0, j: 0}]

x is timestamp
e is location, b is temperature, g is memory, a is humidity
Graph1: Temparature… One line for each location
Graph2: Humidity… One line for each location
and so on..

• This reply was modified 3 years, 9 months ago by sksingh20.

[sksingh20]

x is timestamp

[Indranil]

@sksingh20,

You can display temperature of each location as individual dataseries of the chart, also known as multiseries chart. And humidity in another chart. The sample data(as shared above) can be categorized based on the location parameter and stored as a JSON object. Below is the code snippet for categorizing the data –

for(var i=0; i<data.length; i++){
    if(data[i].e in categorizedData)
      categorizedData[data[i].e].push({x: data[i].x, y: data[i][parameter], e: data[i].e});
    else
      categorizedData[data[i].e] = [{x: data[i].x, y: data[i][parameter], e: data[i].e}];
  }

Then you can use the same JSON object to populate charts based on the categorized data. Please take a look at this JSFiddle for an example.

___________
Indranil Deo
Team CanvasJS