2012-10-31 23 views
7

過去数日間、ハイチャートライブラリを使用してグラフを作成するためにAPIからのサンプルjsonデータでajaxingを使用して問題が発生しました。HighChartsがデータをajax経由でロードする

私はchart.series [0] .data = jsonと同様のものを自分のAjaxコールバックで試みましたが、何も動作しませんでした。

my jsonは、その月の各日のデータの配列です。

"{"month_mentions_graphic":[521,49,81,0,101,0,0,0,21,3071,0,0,0,0,0,1479,6124,2409,2608,0,0,3457,2057,2580,5876,4638,0,0,3337,3479,430]}" 

ここに私のコードです:

var chart; 

$(document).ready(function() { 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25, 
      events: { 
       load: requestData 
      } 
     }, 
     title: { 
      text: 'Menções Mensais', 
      x: -20 //center 
     }, 
     xAxis: { 
      categories: [1,2,3,4,5] 
     }, 
     yAxis: { 
      title: { 
       text: 'Menções' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [ 
     { 
      name: 'mentions', 
      data: [] 
      } 
     ] 
    }); 
}); 


function requestData() { 
    $.ajax({ 
     url: 'api/v1/dashboard/month_mention_graphic', 
     type: "GET", 
     dataType: "json", 
     data : {username : "demo"}, 
     success: function(data) { 
      chart.series[0].data = data; 
     }, 
     cache: false 
    }); 
} 

答えて

13

コールchart.addSeries代わりに初期の空のシリーズにだけポイントアレイを追加するのでは一度で全シリーズを追加する:

function requestData() { 
    $.ajax({ 
     url: 'api/v1/dashboard/month_mention_graphic', 
     type: "GET", 
     dataType: "json", 
     data : {username : "demo"}, 
     success: function(data) { 
      chart.addSeries({ 
       name: "mentions", 
       data: data.month_mentions_graphic 
      }); 
     }, 
     cache: false 
    }); 
} 
+0

thksちょうど私が探していたものです。 –

関連する問題