javascript — Использование PHP, JSON и google.visualization.DataTable для создания диаграммы Google Analytics.
Я пытаюсь создать диаграмму 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>
Решение
Новые панели мониторинга Google используют формат даты, который выглядит следующим образом
new Date(2008,1,28), Также это не может быть в формате строки. Это должно быть в datetime формат. Я также работаю над тем, как сделать массив, который будет выглядеть правильно. Буду репостить, если найду.
Другие решения
поэтому ответ (по крайней мере, для меня это сработало) состоял в том, чтобы отформатировать мою дату в запросе как
$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);
}
Опять же, не уверен, что это идеальное «чистое» решение, но оно сработало для меня. Если у кого-то есть лучший способ сделать это, пожалуйста, поделитесь.