2017-08-04 4 views
1

私はウェブ開発、特にjqueryなどで新しくなっています。私のコードでは、ajaxリクエストのデータでmorrisチャートが見られます。以下のコードスニペット
HTML
jquery ajaxを使用してモーリスチャートが未定義PHP

<div id = "node" class = "something">//some divs here</div> 
<div id = "myModal role = "dialog">//some divs here again 
<div class = "modal-body"><div id = "my_chart"></div></div></div> 

Javascriptを

<script type="text/javascript"> 
$(document).ready(function(){ 
    var chart_data = ''; 
    var div_id = ''; 

    $(".something").click(function(){ 
    div_id = jQuery(this).attr("id"); 
    $.ajax({ 
     type : 'POST', 
     url : 'test1', 
     data : { "node_num" : div_id}, 
     success: function(data){ 
     chart_data = data; 
     console.log(chart_data); 
     $('#myModal').modal(); 
     }, 
     error: function(data){ 
     alert("Something went wrong, please refresh"); 
     } 
    }); 
    }); 


    $("#myModal").on('shown.bs.modal', function(){ 
    $('#my_chart').empty(); 
     var chart = Morris.Area({ 
     element: 'my_chart', 
     data: chart_data, 
     xkey: 'time', 
     ykeys:['power'], 
     labels:['Power(Watts)'], 
     pointSize: 2, 
     hideHover: 'auto', 
     resize: true, 
     lineColors: ['#1abc9c'], 
     fillOpacity: 0.75, 
     parseTime: false 
     }); 
     }); 

    $(".something").hover(function(){ 
    $(this).css('cursor','pointer'); 
    }) 
}); 

</script> 

はPHP

public function test1() 
    { 
     $node_num = $this->input->post('node_num'); 
     $chart = ''; 
     $chart_data = ''; 
     $query = $this->Nodes->get_chartdata($node_num); 

     foreach($query->result() as $row) 
     { 
      $time = substr($row->n_date, -8); 
      $power = ($row->voltage)*($row->current); 
      $chart .= "{ power: ".$power.", time: '".$time."' }, "; 
     } 
     $chart_data = '['.$chart.']'; 
     echo $chart_data; 

    } 
です

PHP出力

[{パワー:21.837696、時間:'10:59:41' }、{パワー:2.07552、時間:'11:00:23' }、{パワー:時間:'11:03:52 '}、{パワー:20.195136、時間:'13:45:01'}、

とすると、morrisチャートにはグラフlike thisが表示されます(データ:chart_dataをPHP出力に置き換えました)。代わりに、私はthisを得ています。私は他の方法に従ったが、それはまだ同じである。どのように私はこれに対処することができますか?あまり前もってありがとう!

答えて

0

グラフを更新するには、setDataを使用する必要があります。

chart.setData(chart_data);

注:第一

あなたがいない文字列をグラフ化する配列オブジェクトを渡す必要があります。

第二: PHP側のビルドアレイとちょうどjson_encode();

第三にエコー:今、私は理解しAJAX呼び出し

+0

dataType:'json',を追加します。どうもありがとうございます!ついに私は必要なものを手に入れました。 –

関連する問題