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?

• mplungjan: Welcome to SO. Please visit the help center to see we prefer a minimal reproducible example which you can add using the <> snippet editor
• Grzegorz Blachliński: 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

Answer 1

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)

Answer 2

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>