将动态数据传递给 Highcharts 系列数据元素

Question

I am currently trying to pass data from my back-end (written in c#) to my front-end to be used within the JavaScript to populate a highcharts x-range graph. The data comes through and is filtered as and when needed correctly but passing the data to the highcharts series data element is proving difficult. When giving the element the raw data copied from the source, it works fine, however when passing the data dynamically it does not, for example:

series: [{
  pointWidth: 20,
  turboThreshold: 10000,
  data: JSON.parse(JSON.stringify("[" + dataString + "]"))
}]

the above is what I am tring to do, the dataString is comprised as follows:

dataString += "{x: " + startDate + ", x2: " + endDate + ", y: " + vesselCounter + "},"

where each variable is passed through from a row in the datatable in the back-end. Running the code like this returns an empty chart, however if I run it as follows

series: [{
  pointWidth: 20,
  turboThreshold: 10000,
  data: [{x: 1244419200000, x2: 1258329600000, y:0}]
}]

the data displays, I'm not sure if it's not possible to pass the data as I am trying but any help would be great! To clarify the data comes through perfectly and is as it should be but the series -> data element does not like it.

Docs for reference: https://api.highcharts.com/highcharts/series.xrange.data

Answer 1

For solution.

1. You remove "," in result string.

2. add quote in each variable.

This is correct code and you can check in http://jsfiddle.net/1zuwr2vo/16/ In jsfiddle.net, you can see running site.

const data = [{
  startDate: 12312353,
  endDate: 13312353,
  vesselCounter: 834
}, {
  startDate: 14312353,
  endDate: 15312353,
  vesselCounter: 834
}, {
  startDate: 16312353,
  endDate: 17312353,
  vesselCounter: 834
}];

let dataString = '';

data.forEach(({
  startDate,
  endDate,
  vesselCounter
}) => {
  dataString += `{"x": ${startDate}, "x2": ${endDate}, "y": ${vesselCounter}},`
});

let result_data = `[${dataString.slice(0, -1)}]`;

console.log(result_data);

Highcharts.chart('container', {
  series: [{
    type: 'xrange',
    data: JSON.parse(result_data)
  }]
});

Answer 2

Managed to solve this by passing the series data as an object

function dateObject(_x, _x2, _y) {
  this.x = _x
  this.x2 = _x2
  this.y = _y
}

thank you everyone for helping and if anyone has questions on this feel free to ask :)