CODEWITHSUNDEEP
javascriptjqueryjsonhighcharts
Atma
Atma

Reputation: 29767

How to parse JSON into HighCharts line graph?

I am trying to parse the following JSON string remotely:

[{"name":"Object1","data":[1,2]},{"name":"Object2","data":[3,4]}]

I am doing so with the following code:

$(function () {
  var chart;
  $(document).ready(function() {
    var options = {
      chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25
      },
      title: {
        text: 'hits by time',
        x: -20 //center
      },
      subtitle: {
        text: 'Source:',
        x: -20
      },
      xAxis: {
        categories: ['8am', '9am', '10am', '11am', '12pm', '1pm',
        '2pm', '3pm', '4pm', '5pm', '6pm', '7pm']
      },
      yAxis: {
        title: {
          text: 'Hits'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.series.name +'</b><br/>'+
          this.x +': '+ this.y;
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
      },
      series: []
    };  

    $.getJSON('http://localhost:8080/jsonget', function(data) {

      var series = {
        data: []
      };

      $.each(data, function(i,item){
        alert(item.name);
        series.name = item.name;
        $.each(item.data, function(j,dataitem){
          alert(dataitem);
          series.data.push(parseFloat(dataitem[i]));                  
        });
      });

      options.series.push(series);    

      // Create the chart
      var chart = new Highcharts.Chart(options);
    });
  });
});

The chart does not render, but does so when I substitute the remote portion for the CSV example on the site.

Does anyone know what the problem is?

Upvotes: 2

Views: 12093

Answers (3)

VFG
VFG

Reputation: 103

Atma. You just should write just dataitem instead of dataitem[i] and it will work.

  $.each(data, function(i,item){
    alert(item.name);
    series.name = item.name;
    $.each(item.data, function(j,dataitem){
      alert(dataitem);
      series.data.push(parseFloat(dataitem[i]));                  
    });
  });

Upvotes: 0

Tunlid
Tunlid

Reputation: 21

The problems is that the chart then is redrawn. So if you have other lines that is disabled (from legend), it will be visible agian when you do a update. I have 5 lines in my graph. It is updated every second. From the legend I can disable/remove some of the lines from the graph. But using this method above (it works) the complete graph is redrawn and all lines is visible again. Is it possible to just update the series (lines) and not the paramaters?

Like this (not working):

function doAjaxData() {
            AjaxLoadingIcon(1);
            $.ajax({
                url: getAjaxUrl(1),
                dataType: 'json',
                cache: false,
                async: true,
                success: function (json) {
                    AjaxLoadingIcon(0);
                    gchartOptions.series = [];
                    gchartOptions.series = json;
                    // gchart = new Highcharts.Chart(gchartOptions);
                    gchart.render();
                    _updateTimer = window.setTimeout("doAjaxData()", 1000);
                    }
                }
            });
        }

Upvotes: 2

Alexander
Alexander

Reputation: 23537

As far as I can tell your data seems to be well formed. So, this should do it:

var chart;
$.getJSON('http://localhost:8080/UDPver/tagdiscover', function(data) {
  // Populate series
  options.series = data;    
  // Create the chart
  chart = new Highcharts.Chart(options);
});

Upvotes: 5

Related Questions