How to display array in array on Highcharts? [JS]

Question

I get data like this from the server:

data":[[1496640705,1583360,1583360,1583370,1583360],[1496640720,1583360,1583350,1583360,1583345],[1496640735,1583350,1583320,1583400,1583320]]

My question is, how can I display this data on Highcharts? Every array first element is the Date for X axis, and only want the last data every array for the Y axis. How can I select these 2 elements for Highcharts?

Welcome to SO. Please visit the help center to see we prefer a minimal reproducible example which you can add using the <> snippet editor — mplungjan
– mplungjan, Commented Jun 5, 2017 at 5:57
As an addition to previous answers you should be able to use your current data format and use keys array for connecting specific value in your array with Highcharts parameter: jsfiddle.net/hy7bywqh — Grzegorz Blachliński
– Grzegorz Blachliński, Commented Jun 5, 2017 at 10:30

brk · Accepted Answer · 2017-06-05 05:53:53Z

2

Every charts in highchart accepts data in different way.Create two separate array xAxis & yAxis from data array & provide their value to the highchart.

var data = [
    [1496640705, 1583360, 1583360, 1583370, 1583360],
    [1496640720, 1583360, 1583350, 1583360, 1583345],
    [1496640735, 1583350, 1583320, 1583400, 1583320]
  ],
  xAxis = [],
  yAxis = [];


data.forEach(function(item) {
  xAxis.push(item[0]);
  yAxis.push(item[item.length - 1])
})

console.log(xAxis, yAxis)

answered Jun 5, 2017 at 5:53

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deep 3015 · Accepted Answer · 2017-06-05 07:07:22Z

Your data from server should contains Date in millisecond format(for highcharts).So your data must be like

  var data = [
    [1496640705000, 1583360, 1583360, 1583370, 1583360],
    [1496640720000, 1583360, 1583350, 1583360, 1583345],
    [1496640735000, 1583350, 1583320, 1583400, 1583320]
  ],
//For highcharts data should be formatted as [[x,y],[x,y],...]
seresData=[]
data.forEach(function(item) {
seresData.push([item[0],item[item.length - 1]])
})
console.log(seresData)

Demo Code

var data = [
    [1496640705000, 1583360, 1583360, 1583370, 1583360],
    [1496640720000, 1583360, 1583350, 1583360, 1583345],
    [1496640735000, 1583350, 1583320, 1583400, 1583320]
  ],

  seresData = []
data.forEach(function(item) {
  seresData.push([item[0], item[item.length - 1]])
})
//console.log(seresData)

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Snow depth at Vikjafjellet, Norway'
  },
  subtitle: {
    text: 'Irregular time data in Highcharts JS'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    title: {
      text: 'Date'
    }
  },
  yAxis: {
    title: {
      text: 'Snow depth (m)'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },

  series: [{
    name: 'Winter 2012-2013',
    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    data: seresData
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Collectives™ on Stack Overflow

How to display array in array on Highcharts? [JS]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related