Googleエリアチャート

Question

Google Area ChartとPHPを使用してデータを表示しようとしています。問題は私がちょうどそれが働くことを傾けることです。もし誰かが助けることができれば、それは最も訴えかけるでしょう。私は間違いなくあなたのJavaScript/HTML（クライアント側）のコードから自分のPHP（サーバ側）のコードを分離することをお勧め

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Date'); 
     data.addColumn('number', 'hits'); 
     data.addRows([ 
     <?php 
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date"); 
while ($row = mysql_fetch_array($query)){ 
$hits=mysql_num_rows($query); 
$date=$row['date'];?> 
['<?php echo "$date";?>', <?php echo ".$hits.";?>], 
<?php } ?> 
]); 

     var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
          hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}} 
         }); 
     } 
    </script> 

    <div id="chart_div"></div> 

Answer 1

：

は、ここに私のコードです。

GoogleのチャートやグラフAPIについての素晴らしい事は、1から引き出すことができるいくつかの例があるが、それはあなたのJavaScriptが含まれているブロック内のMySQLのクエリとPHPを埋め込むときに表示しているものを再現するためにはるかに困難になり、およびUI要素。

以下は、これらのことを「分割する」方法の大まかな例です。実際には、ディスプレイ/ユーザーインターフェイスコード（HTMLとJavaScript）とは全く別のファイルにサーバーサイドコード（あなたの場合はPHP）が必要です。

「フロントエンドコード」ブロックの「DATE」と「HITS」は、実際には変数または値ではありません。これは単に値を入力する場所であることを示しています。理想的には、MySQLクエリからPHPサーバコードを介してJavaScriptコードにデータを渡し、そこを繰り返してグラフを構築します。 JSONデータ交換フォーマットを使用して、PHPからJSへの前後のやりとりをうまくやり遂げることができます。 PHPとJavaScript（jQuery）の両方にJSONとの間でエンコードとデコードを行う機能があります。

フロントエンドコード：

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Date'); 
    data.addColumn('number', 'hits'); 
    data.addRows(
     ['DATE', 'HITS'] 
    ); 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
         hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}} 
        }); 
    } 
</script> 

<div id="chart_div"></div> 

バックエンドコード：

<?php 
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date"); 
$data_to_return = array(); 
while ($row = mysql_fetch_array($query)) 
{ 
    $hits=mysql_num_rows($query); 
    $date=$row['date']; 
    $data_to_return[$date] = $hits; //building array of date=>hits data 
} 
$data_to_send_to_front_end = json_encode($data_to_return); //ridiculous variable name 
?>