Home Forums Chart Support draw one chart with one line for each location

draw one chart with one line for each location

Viewing 4 posts - 1 through 4 (of 4 total)
  • #32774

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

    #32775

    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, 7 months ago by sksingh20.
    #32776

    x is timestamp

    #32809

    @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.

    multiseries chart to display temperature and humidity of different locations

    ___________
    Indranil Deo
    Team CanvasJS

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

You must be logged in to reply to this topic.