Google Charts API-具有兩個系列的簡單折線圖-幾乎存在
[英]Google Charts API - Simple line graph with two series - nearly there
問題描述
我一直試圖通過Google Charts API在折線圖上顯示兩個系列。
我正在使用sql從數據庫中獲取數據，並且一切正常。
我改編了以下代碼： PHP MySQL Google Chart JSON-完整示例
<?php
$connection = mysql_connect(blah);
$database = mysql_select_db(blah);
// The Chart table contain two fields: Date and PercentageChange
$queryData = mysql_query("SELECT Date, PercentageChange
FROM Data
ORDER BY Date DESC
LIMIT 0, 14");
$queryData1 = mysql_query("SELECT Date, PercentageChange
FROM Data1
ORDER BY Date DESC
LIMIT 0, 14");
$table = array();
$table['cols'] = array(
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Percentage Change', 'type' => 'number'),
array('label' => 'Percentage Change 1', 'type' => 'number')
);
//First Series
$rows = array();
while($r = mysql_fetch_assoc($queryData)) {
$temp = array();
// the following line will used to slice the Pie chart
$temp[] = array('v' => (string) $r['Date']);
//Values of the each slice
$temp[] = array('v' => (float) $r['PercentageChange']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
//For Data1
$rows = array();
while($r = mysql_fetch_assoc($queryData1)) {
$temp = array();
// the following line will used to slice the Pie chart
$temp[] = array('v' => (string) $r['Date']);
//Values of the each slice
$temp[] = array('v' => (float) $r['PercentageChange']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable1 = json_encode($table);
echo $jsonTable1;
?>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data1 = new google.visualization.DataTable(<?=$jsonTable1?>);
var options = {
title: 'Performance',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
現在，我知道它正在從每個查詢中獲取正確的數據，但我不知道如何將兩者放在同一張圖表上。
我認為這與以下行有關：
chart.draw(data, options);
並嘗試過：
chart.draw(data, data1, options);
但是沒有運氣。
有人能指出我正確的方向嗎？
謝謝！
編輯：還在為此苦苦掙扎-任何想法嗎？
2 個解決方案
解決方案1
0 2013-04-10 14:37:56
一個簡單的
var obj = data.concat(data1);
chart.draw(obj, options);解決方案2
0 2013-05-07 13:39:49
如user1821727所述，您可以在將數據傳遞給javascript api之前簡單地合並數組
var obj = data.concat(data1);
chart.draw(obj, options);
我假設您沒有更正傳遞給draw函數的參數。 您必須使用新創建的obj
chart.draw(obj, options);
或另一個問題可能是兩個數據集中都有帶有標簽的行。 在這種情況下，由於輸入包含不正確的數據，圖形將無法呈現。
Google圖表 - 圖表為空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.