0

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

joy08
  • 9,004
  • 8
  • 38
  • 73

1 Answers1

1

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:

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
  • If you refer this question ,https://stackoverflow.com/questions/55609273/highcharts-not-rendering-reacttypescripthighcharts , How can i transform the data in the promise block? – joy08 May 02 '19 at 10:45
  • What do you need exactly? You have the answer there with the solution. – Wojciech Chmiel May 06 '19 at 09:21