2017-03-10 8 views
1

私はシリーズのjsonデータを使用してハイチャートを作成しました。ハイチャートを更新して、他のjsonデータから新しいデータを再描画する必要があります。私は、これはあなたがチャート更新する必要がありjsonデータ値でハイチャート系列を再描画する方法は?

<?php 
$con=mysqli_connect("localhost","root","","silo"); 

if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 


// Data for Titik1 

$query = mysqli_query($con,"SELECT * FROM temp1 where no ='1'"); 
$rows = array(); 
$rows['name'] = 'Titik 1'; 
while($tmp= mysqli_fetch_array($query)) { 
    $rows['data'][] = $tmp['sensor1']; 
    $rows['data'][] = $tmp['sensor2']; 
    $rows['data'][] = $tmp['sensor3']; 
    $rows['data'][] = $tmp['sensor4']; 
    $rows['data'][] = $tmp['sensor5']; 
    $rows['data'][] = $tmp['sensor6']; 
    $rows['data'][] = $tmp['sensor7']; 
    $rows['data'][] = $tmp['sensor8']; 
    $rows['data'][] = $tmp['sensor9']; 
    $rows['data'][] = $tmp['sensor10']; 
    $rows['data'][] = $tmp['sensor11']; 
    $rows['data'][] = $tmp['sensor12']; 
} 

// Data for Titik2 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='2'"); 
$rows1 = array(); 
$rows1['name'] = 'Titik 2'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows1['data'][] = $tmp['sensor1']; 
    $rows1['data'][] = $tmp['sensor2']; 
    $rows1['data'][] = $tmp['sensor3']; 
    $rows1['data'][] = $tmp['sensor4']; 
    $rows1['data'][] = $tmp['sensor5']; 
    $rows1['data'][] = $tmp['sensor6']; 
    $rows1['data'][] = $tmp['sensor7']; 
    $rows1['data'][] = $tmp['sensor8']; 
    $rows1['data'][] = $tmp['sensor9']; 
    $rows1['data'][] = $tmp['sensor10']; 
    $rows1['data'][] = $tmp['sensor11']; 
    $rows1['data'][] = $tmp['sensor12']; 
} 

// Data for Titik3 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='3'"); 
$rows2 = array(); 
$rows2['name'] = 'Titik 3'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows2['data'][] = $tmp['sensor1']; 
    $rows2['data'][] = $tmp['sensor2']; 
    $rows2['data'][] = $tmp['sensor3']; 
    $rows2['data'][] = $tmp['sensor4']; 
    $rows2['data'][] = $tmp['sensor5']; 
    $rows2['data'][] = $tmp['sensor6']; 
    $rows2['data'][] = $tmp['sensor7']; 
    $rows2['data'][] = $tmp['sensor8']; 
    $rows2['data'][] = $tmp['sensor9']; 
    $rows2['data'][] = $tmp['sensor10']; 
    $rows2['data'][] = $tmp['sensor11']; 
    $rows2['data'][] = $tmp['sensor12']; 
} 
// Data for Titik4 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='4'"); 
$rows3 = array(); 
$rows3['name'] = 'Titik 4'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows3['data'][] = $tmp['sensor1']; 
    $rows3['data'][] = $tmp['sensor2']; 
    $rows3['data'][] = $tmp['sensor3']; 
    $rows3['data'][] = $tmp['sensor4']; 
    $rows3['data'][] = $tmp['sensor5']; 
    $rows3['data'][] = $tmp['sensor6']; 
    $rows3['data'][] = $tmp['sensor7']; 
    $rows3['data'][] = $tmp['sensor8']; 
    $rows3['data'][] = $tmp['sensor9']; 
    $rows3['data'][] = $tmp['sensor10']; 
    $rows3['data'][] = $tmp['sensor11']; 
    $rows3['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 5 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='5'"); 
$rows4 = array(); 
$rows4['name'] = 'Titik 5'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows4['data'][] = $tmp['sensor1']; 
    $rows4['data'][] = $tmp['sensor2']; 
    $rows4['data'][] = $tmp['sensor3']; 
    $rows4['data'][] = $tmp['sensor4']; 
    $rows4['data'][] = $tmp['sensor5']; 
    $rows4['data'][] = $tmp['sensor6']; 
    $rows4['data'][] = $tmp['sensor7']; 
    $rows4['data'][] = $tmp['sensor8']; 
    $rows4['data'][] = $tmp['sensor9']; 
    $rows4['data'][] = $tmp['sensor10']; 
    $rows4['data'][] = $tmp['sensor11']; 
    $rows4['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 6 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='6'"); 
$rows5 = array(); 
$rows5['name'] = 'Titik 6'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows5['data'][] = $tmp['sensor1']; 
    $rows5['data'][] = $tmp['sensor2']; 
    $rows5['data'][] = $tmp['sensor3']; 
    $rows5['data'][] = $tmp['sensor4']; 
    $rows5['data'][] = $tmp['sensor5']; 
    $rows5['data'][] = $tmp['sensor6']; 
    $rows5['data'][] = $tmp['sensor7']; 
    $rows5['data'][] = $tmp['sensor8']; 
    $rows5['data'][] = $tmp['sensor9']; 
    $rows5['data'][] = $tmp['sensor10']; 
    $rows5['data'][] = $tmp['sensor11']; 
    $rows5['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 7 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='7'"); 
$rows6 = array(); 
$rows6['name'] = 'Titik 7'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows6['data'][] = $tmp['sensor1']; 
    $rows6['data'][] = $tmp['sensor2']; 
    $rows6['data'][] = $tmp['sensor3']; 
    $rows6['data'][] = $tmp['sensor4']; 
    $rows6['data'][] = $tmp['sensor5']; 
    $rows6['data'][] = $tmp['sensor6']; 
    $rows6['data'][] = $tmp['sensor7']; 
    $rows6['data'][] = $tmp['sensor8']; 
    $rows6['data'][] = $tmp['sensor9']; 
    $rows6['data'][] = $tmp['sensor10']; 
    $rows6['data'][] = $tmp['sensor11']; 
    $rows6['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 8 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='8'"); 
$rows7 = array(); 
$rows7['name'] = 'Titik 8'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows7['data'][] = $tmp['sensor1']; 
    $rows7['data'][] = $tmp['sensor2']; 
    $rows7['data'][] = $tmp['sensor3']; 
    $rows7['data'][] = $tmp['sensor4']; 
    $rows7['data'][] = $tmp['sensor5']; 
    $rows7['data'][] = $tmp['sensor6']; 
    $rows7['data'][] = $tmp['sensor7']; 
    $rows7['data'][] = $tmp['sensor8']; 
    $rows7['data'][] = $tmp['sensor9']; 
    $rows7['data'][] = $tmp['sensor10']; 
    $rows7['data'][] = $tmp['sensor11']; 
    $rows7['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 9 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='9'"); 
$rows8 = array(); 
$rows8['name'] = 'Titik 9'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows8['data'][] = $tmp['sensor1']; 
    $rows8['data'][] = $tmp['sensor2']; 
    $rows8['data'][] = $tmp['sensor3']; 
    $rows8['data'][] = $tmp['sensor4']; 
    $rows8['data'][] = $tmp['sensor5']; 
    $rows8['data'][] = $tmp['sensor6']; 
    $rows8['data'][] = $tmp['sensor7']; 
    $rows8['data'][] = $tmp['sensor8']; 
    $rows8['data'][] = $tmp['sensor9']; 
    $rows8['data'][] = $tmp['sensor10']; 
    $rows8['data'][] = $tmp['sensor11']; 
    $rows8['data'][] = $tmp['sensor12']; 
} 
// Data for Titik 10 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='10'"); 
$rows9 = array(); 
$rows9['name'] = 'Titik 10'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows9['data'][] = $tmp['sensor1']; 
    $rows9['data'][] = $tmp['sensor2']; 
    $rows9['data'][] = $tmp['sensor3']; 
    $rows9['data'][] = $tmp['sensor4']; 
    $rows9['data'][] = $tmp['sensor5']; 
    $rows9['data'][] = $tmp['sensor6']; 
    $rows9['data'][] = $tmp['sensor7']; 
    $rows9['data'][] = $tmp['sensor8']; 
    $rows9['data'][] = $tmp['sensor9']; 
    $rows9['data'][] = $tmp['sensor10']; 
    $rows9['data'][] = $tmp['sensor11']; 
    $rows9['data'][] = $tmp['sensor12']; 
}// Data for Titik 11 
$query = mysqli_query($con,"SELECT * FROM temp1 where no ='11'"); 
$rows10 = array(); 
$rows10['name'] = 'Titik 11'; 
while($tmp = mysqli_fetch_array($query)) { 
    $rows10['data'][] = $tmp['sensor1']; 
    $rows10['data'][] = $tmp['sensor2']; 
    $rows10['data'][] = $tmp['sensor3']; 
    $rows10['data'][] = $tmp['sensor4']; 
    $rows10['data'][] = $tmp['sensor5']; 
    $rows10['data'][] = $tmp['sensor6']; 
    $rows10['data'][] = $tmp['sensor7']; 
    $rows10['data'][] = $tmp['sensor8']; 
    $rows10['data'][] = $tmp['sensor9']; 
    $rows10['data'][] = $tmp['sensor10']; 
    $rows10['data'][] = $tmp['sensor11']; 
    $rows10['data'][] = $tmp['sensor12']; 
} 


$result = array(); 
array_push($result,$rows); 
array_push($result,$rows1); 
array_push($result,$rows2); 
array_push($result,$rows3); 
array_push($result,$rows4); 
array_push($result,$rows5); 
array_push($result,$rows6); 
array_push($result,$rows7); 
array_push($result,$rows8); 
array_push($result,$rows9); 
array_push($result,$rows10); 


print json_encode($result, JSON_NUMERIC_CHECK); 

mysqli_close($con); 
?> 
 // JavaScript Document 
$(document).ready(function() { 
     (function(H) { 
      H.Chart.prototype.createCanvas = function(divId) { 
       var svg = this.getSVG(), 
        width = parseInt(svg.match(/width="([0-9]+)"/)[1]), 
        height = parseInt(svg.match(/height="([0-9]+)"/)[1]), 
        canvas = document.createElement('canvas'); 

       canvas.setAttribute('width', width); 
       canvas.setAttribute('height', height); 

       if (canvas.getContext && canvas.getContext('2d')) { 

        canvg(canvas, svg); 

        return canvas.toDataURL("image/png"); 

       }  
       else { 
        alert("Your browser doesn't support this feature, please use a modern browser"); 
        return false; 
       } 

      } 
     }(Highcharts)); 

     //charts 
     // JavaScript Document 
     $(function() { 
      var chart; 
      $(document).ready(function() { 
       $.getJSON("../php/termocouple/line_termocouple.php", function(json) { 

        chart = new Highcharts.Chart({ 
         chart: { 
          renderTo: 'chart1', 
          type: 'line' 

         }, 
         title: { 
          text: 'Termocouple Graph Result' 

         }, 
         subtitle: { 
          text: '' 

         }, 
         xAxis: { 
          title: { 
           text: 'Sensor' 
          }, 
          categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
         }, 
         yAxis: { 
          title: { 
           text: 'Temperature (°C)' 
          }, 
          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: 120, 
          borderWidth: 0 
         }, 
         series: json 
        }); 

       }); 

      }); 


     }); 
      }); 

答えて

0

私のコードです

...誰かが私を助けてくださいT_Tどのようにそれを行うことを知りません。

  1. あなたはは、チャート情報Chart Update API)アクションで更新チャートの

    chart.update({ 
        title: { 
         text: 'new text' 
        } 
    }) 
    

    JS fiddleを更新し、簡単なグラフの更新を行うことができます。

  2. がチャートデータを更新する一連の更新を行うことができます。シリーズの更新のため(Series Update API

    // if data is in json format, convert it to an array 
    chart.series[0].update({ 
        data: [...] //pass your new data here 
    }); 
    

    JS Fiddle

参考JS Fiddle Ref

+0

私はシリーズとしてJSONを使用しています。私はちょうど私のjsonデータの右にonclick関数のシリーズを変更する? –

+0

私はデータ系列にjsonを使用します。私はちょうど私のjsonのdataseriesにシリーズを変更する? –

+0

@jackHenaldyはい。あなたはまた、JSフィドルでの例を見ることができます:) –

関連する問題