Highcharts JSON not loading

Question

I'm using Highchart Multiline chart in my angular application. I can't load the DATA into highchart data.

Below is my sample DATA.

[
  {
    "name": "SQL Injection Attack: SQL Tautology Detected.",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 34),12]",
      "[Date.UTC(2018, 6, 20, 12, 33),12]",
      "[Date.UTC(2018, 6, 20, 12, 32),10]"
    ]
  },
  {
    "name": "TestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 27),2]"
    ]
  },
  {
    "name": "aTestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 28),1]"
    ]
  }
]

When I remove the double quotes it is working fine. But I don't know how to remove the double quotes and send this data to Highchart.

Possible duplicate of [How to parse JSON data with jQuery / JavaScript?](https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — cнŝdk, Jul 25 '18 at 09:02

score 0 · Accepted Answer · answered Jul 25 '18 at 15:49

It's not working because you are trying to provide the chart with String type points, but Object, Array or Number is expected, so it doesn't know how to handle this.

Actually, I don't know why you didn't just take the timestamp from your server instead of that string values, what should be the best way to avoid the unnecessary data processing.

In order to parse that string, you could use eval() function, but it is really harmful and you should use it very carefully. Imagine that the user is providing the data for the chart, and this function executes every javascript passed as an argument. As you can see, it extremely violates the security. Here is the example: https://jsfiddle.net/vpjbg7f8/, but I don't recommend to use it when the user is data provider.

Better solution is to parse every string, get appropriate values (numbers), and use the Date.UTC by yourself, just like that:

var series = [
  {
    "name": "SQL Injection Attack: SQL Tautology Detected.",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 34),12]",
      "[Date.UTC(2018, 6, 20, 12, 33),12]",
      "[Date.UTC(2018, 6, 20, 12, 32),10]"
    ]
  },
  {
    "name": "TestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 27),2]"
    ]
  },
  {
    "name": "aTestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 28),1]"
    ]
  }
]

series.forEach(series => {
    series.data = series.data.map(point => {
        var parsedData = point.split(/\D+/).splice(1, 6).map(value => { return parseInt(value, 10) })
        var value = parsedData[5]
        parsedData.splice(-1, 1)

        return [Date.UTC(...parsedData), value]
  }).reverse()
})

Live example: https://jsfiddle.net/qftn5p0s/

Highcharts JSON not loading

1 Answers1