CODEWITHSUNDEEP
javascriptarrayshighcharts
Zirek
Zirek

Reputation: 533

highcharts doesn't read data, works with fake data

I'm trying to make visualization of the voltage, Array has 1k elements but I'm testing it on first 10 for now, the thing is that It doesn't display anything, what's more interesting when I use fake date which is commented out now, It shows chart properly. I thought that perhaps there is some problem with array so tried to use Array.from but it also brought no effect, here is my code:

.then(function(res) {
                    var averageVoltage = []
                    var inputVoltage = []
                    var date = []
                    for (var i = 0; i < 10; i++) {
                        if (res[i].average_volatage !== undefined) {
                            averageVoltage.push(res[i].average_volatage)
                            date.push(res[i].timestamp)
                        }
                    }
                    console.log(averageVoltage)
                    console.log(date)

                    Highcharts.chart('battery_chart', {
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: id
                        },
                        yAxis: {
                            title: {
                                text: 'Measurement'
                            },
                        },
                        xAxis: {
                            categories: date
                        },
                        series: [{
                            name: 'Average Voltage',
                            data: averageVoltage
                            // data: [12283, 12283, 12281, 12280, 12282, 12283, 12281, 12282, 12281, 12280]
                        }, 
                    ]
                    });

and that's how array is shown in console.log: enter image description here

Upvotes: 0

Views: 53

Answers (1)

ewolden
ewolden

Reputation: 5803

Your array should show up as [12283, 12281, 12280, etc.] in console as well, instead it shows up as [Number, Number, ...]. Try changing this line: 

averageVoltage.push(res[i].average_volatage)

to: 

averageVoltage.push(parseInt(res[i].average_volatage))

Additionally, instead of using dates as categories, it could be easier to use the highchart datetime axis. This would let you manipulate how you want the date displayed, have several series with different timestamps in one graph, and many other things. To get this to work, you could do this:

.then(function(res) {
  var averageVoltage = []
  var inputVoltage = []
  for (var i = 0; i < 10; i++) {
    if (res[i].average_volatage !== undefined) {
      averageVoltage.push({x: new Date(res[i].timestamp).getTime(), y: parseInt(res[i].average_volatage)})
    }
  }
  console.log(averageVoltage)

  Highcharts.chart('battery_chart', {
    chart: {
      type: 'line'
    },
    title: {
      text: id
    },
    yAxis: {
      title: {
        text: 'Measurement'
      },
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: 'Average Voltage',
      data: averageVoltage
    }, 
    ]
});

Upvotes: 1

Related Questions