我正在尝试创建一个包含仪表板的Google图表,非常类似于:https://google-developers.appspot.com/chart/interactive/docs/gallery/controls,我遇到的问题是我的数据格式错误,我不知道原因。这是代码。我相信这与它有关 google.visualization.DataTable和google.visualization.arrayToDataTable
感谢您的帮助!
PHP
$result = $conn->query("SELECT
date,
ebay_sales,
amazon_sales,
ssllc_sales
FROM stayingsharpllc_.sales
WHERE date > '2014-09-01'
GROUP BY date
ORDER BY date asc
LIMIT 2;"
);
$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
/*
note that one column is in "string" format and another one is in "number" format
as pie chart only required "numbers" for calculating percentage
and string will be used for Slice title
*/
array('label' => 'Date', 'type' => 'string'),
array('label' => 'eBay Sales', 'type' => 'number'),
array('label' => 'Amazon Sales', 'type' => 'number'),
array('label' => 'SSLLC Sales', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['date']);
// Values of each slice
$temp[] = array('v' => (int) $r['ebay_sales']);
$temp[] = array('v' => (int) $r['amazon_sales']);
$temp[] = array('v' => (int) $r['ssllc_sales']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
这是图表代码
// dashboard
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.DataTable(<?=$jsonTable?>);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Amazon Sales'
}
});
// Create a Column, passing some options
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 800,
'height': 300,
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, columnChart);
// Draw the dashboard.
dashboard.draw(data);
}
和Divs:
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--this is the div that will hold the pie chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
<div id="table_div"></div>
答案 0 :(得分:0)
新的Google信息中心使用的是日期格式
new Date(2008,1,28)
。它也不能是字符串格式。它必须是datetime
格式。我还在研究如何制作一个看起来正确的数组。如果我发现它会重新发布。
答案 1 :(得分:0)
所以答案(至少对我有用)是在查询中格式化我的日期,如
$result = $conn->query("SELECT
DATE_FORMAT(DATE_SUB(DATE(order_date),INTERVAL 1 MONTH),'Date(%Y, %m, %d)') as date,
然后确保日期不是字符串并且是日期
array('label' => 'Date', 'type' => 'date'),
最后我在绑定后错过了}
dashboard.bind(RangeSlider, Chart);
// Draw the dashboard.
dashboard.draw(data);
}
再次,不确定这是完美的&#34;清洁&#34;解决方案,但它对我有用。如果有人有更好的方法,请分享。