CODEWITHSUNDEEP
reactjshighcharts
joy08
joy08

Reputation: 9662

Unable to transform the data for rendering line charts: Highcharts+React

I am actually new to this highcharts . Been trying to render a line chart . I am facing issues while transforming the data returned by back-end to the data required by highcharts.

Can someone suggest me how to transform the below data object to the data required by line charts.Trying to plot a graph that compares current and previous values

Help would be appreaciated.

Object

{"data":
        [
             {"currentVal":3488,"prevVal":0,"timestamp":1554181200000},
             {"currentVal":3453,"prevVal":3,"timestamp":1554481200000},
             {"currentVal":3456,"prevVal":2,"timestamp":1554581200000}
        ]
}

As per the documnentaion the line charts data accepts the following structure.

"data": [
    {
      "name": "currentVal",
      "data": [ 7,7,8]
    },
    {
      "name": "prevVal",
      "data": [1,6,7]      
    }
  ]
}

I would want the help in transforming the object that mentioned in the top

Upvotes: 0

Views: 101

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

The simplest way to transform the object:

var obj = {
  data: [{
    "currentVal": 3488,
    "prevVal": 3000,
    "timestamp": 1554181200000
  }, {
    "currentVal": 3453,
    "prevVal": 3123,
    "timestamp": 1554481200000
  }, {
    "currentVal": 3456,
    "prevVal": 3341,
    "timestamp": 1554581200000
  }]
};

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    name: "currentVal",
    data: obj.data.map(elem => [
        elem.timestamp, elem.currentVal
    ])
  }, {
    name: "prevVal",
    data: obj.data.map(elem => [
        elem.timestamp, elem.prevVal
    ])
  }]
});

Demo:

Upvotes: 1

Related Questions