Googleグラフ別のグラフを隣り合わせに追加

私はmysqlで作業チャートを作ったが、私は第1のチャートの隣に別のチャートを作成したいが、うまくいきません。Googleグラフ別のグラフを隣り合わせに追加

私のコード

<?php 
$con = mysqli_connect('xxxx','xxxx','xxxx','xxxx'); 
?> 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 
1234 
</title> 
<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 = google.visualization.arrayToDataTable([ 

///Start Chart 
['Date', 'Total Orders'], 
<?php 
$query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType"; 

$exec = mysqli_query($con,$query); 
while($row = mysqli_fetch_array($exec)){ 

echo "['".$row['saleType']."',".$row['count']."],"; 
} 
?> 
///End Chart 

]); 

var options = { 
title: 'Total Orders in 2017' 
}; 
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart")); 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<h3>1234</h3> 
<div id="columnchart" style="width: 600px; height: 500px;"></div> 
</body> 
</html>

は、これは私のチャートであるが、私は隣同士に別のものを作りたい：

出典

2017-02-14 DjRossoreTV

外部画像はSOにはあまり適していません。彼らはいつか消えるだろう。また、これを自分で解決しようとしているのは何ですか？ – jdv

私は///開始チャートから///終了チャートまでコピーして、///終了チャートの後に貼り付けましたが、それは動作しませんでした、それは私に空白のページを与えました。 – DjRossoreTV

ああ、そうだ。はい、質問テキストに未処理のPHPマークアップを入れて、それをレンダリングすることはできません。たとえそれがレンダリングされたとしても、そのデータをどのように見つけ出すと思いますか？イメージをインラインで配置することができます。 – jdv

非常にHTML内PHPを混合ないをお勧めします/ javascript ...

代わりに、PHPからデータを取得するためにjqueryの/アヤックスを使用し、その後... JSON形式でデータを返すために

getdata1.php

<?php $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType"; $exec = mysqli_query($con,$query); $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'Sale Type', 'type' => 'string'), array('label' => 'Total Orders', 'type' => 'number') ); while($row = mysqli_fetch_array($exec)){ $temp = array(); $temp[] = array('v' => (string) $row['saleType']); $temp[] = array('v' => (int) $row['count']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; echo json_encode($table); ?>

をPHPを使用と図表を描く...

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script> 
    google.charts.load('current', { 
    callback: function() { 
     // draw chart from php data 
     $.ajax({ 
     url: 'getdata1.php', 
     dataType: 'json', 
     done: function (jsonData) { 
      var data = new google.visualization.DataTable(jsonData); 
      var options = { 
      title: 'Total Orders in 2017' 
      }; 
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart")); 
      chart.draw(data, options); 
     }, 
     fail: function(jqXHR, textStatus, errorThrown) { 
      console.log(errorThrown + ': ' + textStatus); 
     } 
     }); 

     // then just use another php page to get the other data and draw another chart 
     $.ajax({ 
     url: 'getdata2.php', 
     dataType: 'json', 
     done: function (jsonData) { 
      var data = new google.visualization.DataTable(jsonData); 
      var options = { 
      title: 'Total Other Orders in 2017' 
      }; 
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart2")); 
      chart.draw(data, options); 
     }, 
     fail: function(jqXHR, textStatus, errorThrown) { 
      console.log(errorThrown + ': ' + textStatus); 
     } 
     }); 
    }, 
    packages: ['corechart'] 
    }); 
</script>

ノート、またrelease notes ...

に応じて対jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

、ライブラリをロードするためにloader.jsを使用したまま、Googleのチャートのバージョンをお勧めしますjsapiローダーを介して入手可能なものは、もはや一貫して更新されていません。新しい静的ローダーを今から使用してください。

出典

2017-02-15 01:00:03 WhiteHat

この質問は運がいいですか？ – WhiteHat

Googleグラフ別のグラフを隣り合わせに追加

答えて

関連する問題