2013-02-07 120 views
1

我正在使用CI(+ HMVC)在窗體上顯示帶有ajax事件的Highcharts。JSON,Codeigniter,Highcharts和AJAX

我的pb是爲圖表創建valids系列。我必須從MySQL DB創建6個系列。我的圖表代碼由 blank page highchart in using jquery to call json arrary發起。

我查看 (<?=$instance_graph?>無處不在,因爲我希望能夠以實例的多個圖表)

$(document).ready(function() { 
    $('#submit<?=$instance_graph?>').click(function() { 
     $('#rendu_graph<?=$instance_graph?>').html(''); 
     var form_data = { 
     from : $('#from[name=from<?=$instance_graph?>]').val(), 
     to : $('#to[name=to<?=$instance_graph?>]').val(), 
     parametre : $('#parametre[name=parametres<?=$instance_graph?>]').val(), 
     ajax : '1' 
     }; 
     $.ajax({ 
      url: "<?= site_url('graph_meteo/ajax_graph'); ?>", 
      type: 'POST', 
      async : false, 
      data: form_data, 
      dataType:'json', 
      success: function(data) { 
      //alert(msg) ; 
      //$('#rendu_graph<?=$instance_graph?>').html(msg); 
      var chartSeriesData=[]; 
      $.each(data, function(i,item){ 
       var series_name = item.name; 
       var series_data = item.data;  
       var series = {data: item.data,name:series_name}; 
       chartSeriesData.push(series); 
      }); 
      console.log(chartSeriesData) ; 
      chart = new Highcharts.Chart({ //Début du Highchar 
      chart: { 
       renderTo: 'rendu_graph<?=$instance_graph?>', 
       type: 'spline' 
      }, 
      title: { 
       text: 'Graph' 
      }, 
      subtitle: { 
       text: 'Title' 
      }, 
      xAxis: { 
       type: 'datetime' 

      }, 
      yAxis: { 
       title: { 
        text: 'param 1' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%a %d %b %H:%M', this.x) + ': ' + this.y + ' m'; 
       } 
      }, 

      series: chartSeriesData 


     }) 

系列創建的console.log:

[Object { data="[Date.UTC(2013,02,06,14,15),65.09375]", name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,15),65.09375]", name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,15),65.09375]", name="Station 1"}, Object { data="[Date.UTC(2013,02,06,14,30),63.425]", name="Station 1"}. 

image

當然,我有一個系列,每個對象沒有劇情:

enter image description here

編輯:我在尋找一種方式來與這些數據(1號線)一份不錯的工作圖,我想我的代碼爲多行/系列工作。我的大夥計是從查詢結果開始到圖表系列格式。一個例子可能是很好的答案。

我希望你能在我生氣之前幫助我!

+0

什麼是你尋求幫助與?你沒有問一個問題 – jmadsen

+0

你看!我開始生氣了!我在第一篇文章的底部有真正的問題。 – Semaphore

回答

0

您的設置的第一個問題是每個系列的數據都是一個帶有數組的字符串。目前,它看起來像:

{ data: "[Date.UTC(2013,02,06,14,15),65.09375]", name: "Station 1"} 

名字看起來不錯,但數據應該是一個真正的JavaScript數組,而不是字符串。這是你想要它看起來像:

{ data: [Date.UTC(2013,02,06,14,15),65.09375], name: "Station 1"} 

當這個問題解決了,我想你應該把所有的數據點放在同一個系列定義。因此,而不是:

{ data: [Date.UTC(2013,02,06,14,15),65.09375], name: "Station 1"}, 
{ data: [Date.UTC(2013,02,07,14,15),67.09375], name: "Station 1"} 

你應該有一個系列點多:

{ data: [ 
     [Date.UTC(2013,02,06,14,15),65.09375], 
     [Date.UTC(2013,02,07,14,15),67.09375], 
     <more data points here>], 
    name="Station 1"}, 
+0

我完全同意,但我不知道如何用一個「名稱」摺疊所有點 – Semaphore

+0

我不認爲你應該爲每個點首先創建單獨的系列,如果你避免了這一點,那麼就沒有必要摺疊它們背部。看看'$ .each(data,function(i,item){'''在你的代碼中)的主體,你推動:爲每個點設置一個新的系列配置 – eolsson

+0

好吧,現在我有這樣的東西:[{名稱「:」1「,」data「:」[(2013,02,07,19,00,00),75.73125],[(2013,02,07,06,45,00),92.83125],... 。但是當我用這個$ .each(data,function(key,value){console.log(value);})來循環這些數據的時候,每個數字都用逗號分開! – Semaphore