CODEWITHSUNDEEP
javascriptjqueryajaxhighcharts
Elie Saad
Elie Saad

Reputation: 312

Data not appearing in HighChart

I am trying to create something like this resizable HighChart. The difference is that i am loading my data from a blob. This is the graph that i receive: enter image description here

This is part of the received data, from the console.log(lines);:

[{ date: '7/13/2016 8:35:00 AM', value: 60 },{ date: '7/13/2016 8:36:00 AM', value: 45 },...]

This is my code: https://jsfiddle.net/end5xc7m/

series: [{
  turboThreshold: 20000,
  type: 'area',
  name: 'Values to date',
  data: data}

I believe this is where i am getting the problem from, in the function visitorData.

I am not having the data projected onto the graph.

Upvotes: 0

Views: 70

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

As jlbriggs noted, this is due to a formatting issue. Unless you you're using categories to plot your axes, Highcharts visualizations will not draw if data are input as strings.

I've updated your fiddle with a few fixes: https://jsfiddle.net/brightmatrix/end5xc7m/2/

function processData(allText) {
    var allTextLines = allText.split(/\r?\n/);
    var lines = [];
    for (var i = 0; i < allTextLines.length - 1; i++) {
        var currentLine = allTextLines[i].split(',');
        var thisLineValue = [Date.parse(currentLine[0]),parseInt(currentLine[1])];
        lines.push(thisLineValue);
    }
    return lines;
}

Here's what I changed:

  • What you want to pass along to your chart is a set of arrays like [x,y], where these variables are either dates or numbers. Building the values using curly braces and + concatenation operators turns these into strings. So, instead, I created a temporary array called thisLineValue and pushed that to your lines array.
  • Next, within that temporary array, I used Date.parse() to turn your date values into timestamps. This is happily understood by Highcharts for datetime axes, as you set with your x-axis.
  • For your y-axis value, I used parseInt() to avoid those values being turned into strings as well.
  • Finally, I removed the toString() function when you return the lines array to the chart. Again, this keeps the values in the format the chart is expecting (dates and numbers).

I hope this is helpful for you!

Upvotes: 2

Related Questions