Create highcharts chart using AJAX/JSON

1
votes

I am building a website that uses the Highcharts library to display a single line series chart. I am using AJAX to retrieve historical financial data from yahoo finance using their YQL.

The ajax call is working correctly and I can view the returned data in the console for example

console.log( data.query.results.quote[0].Close ); returns the closing price value 457.84

How do I now build the single line series chart using this data?

I cannot find a simple explanation anywhere of how to create the chart using AJAX data.

Thanks

edit: I am fetching the data in AJAX and it works correctly but trying to make the chart work with JSON is where im having difficulties.

This is what my code currently looks like: http://jsfiddle.net/JbGvx/

This is the demo code off the HighStocks website: http://jsfiddle.net/xDhkz/

I think the problem is with the date formatting of the AJAX request. The date is being returned like so 2013-02-25 but the chart wants JS timestamps. Is there a way that I can extract the date from the AJAX, convert it using Date.UTC and then make the chart using the converted data?

2
ajaxjsonhighchartsyqlhighstock

2 Answers

1
votes

If you are considering stock data, consider using HighStocks instead of HighCharts. It can handle many data points much faster than HighCharts is able to.

HighStocks has an example where they pull in AJAX data (1.6 million points) asynchronously here: http://www.highcharts.com/stock/demo/lazy-loading

0
votes
var chartSeriesData = [];

var chartCategory = [];

$.each(response, function() {

  if(this.name!="TOTAL" && this.no!="0")
  {

    var series_name = this.name;
    var series_data = this.no;

    var series = [
      series_name,
      parseFloat(series_data)
    ];
    chartSeriesData.push(series);   

  }                   

});
//initialize options for highchart

var options = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'SalesOrder '
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      center:['60%','60%'],
      size:150
      ,
      dataLabels: {
        enabled: true,
        color: '#000000',
        distance: 40,
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.y} '
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data:chartSeriesData //load array created from json
  }]
}


//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);