Cakephp to Google Chart - cakephp

Question

In my controller I create the array to be charted
function chart() {
$results = $this->Visit->query(
"SELECT date(visits.created) as visit_date,
Count(visits.id) AS count_visits
FROM visits
GROUP BY date(visits.created)"
);
foreach($results AS $result) {
$row = array(
$result[0]['visit_date'],
$result[0]['count_visits']
);
$chartData[] = json_encode($row);
}
pr($chartData);
}
pr($chartData) gives following array
Array
(
[0] => ["2012-07-11","5"]
[1] => ["2012-07-13","1"]
[2] => ["2012-07-14","1"]
)
in chart view i have
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable($chartData);
var options = {
title: 'Visits by Date',
hAxis: {title: 'Date', titleTextStyle: {color: 'black'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
but this doesn't get me a chart .. no errors ... just no chart ..
if I manually type in an array to test my view, it works fine ... eg if i replace ..
var data = google.visualization.arrayToDataTable($chartData);
with the following format from Google Chart example it generates a nice column chart
var data = google.visualization.arrayToDataTable([
['Date', 'Count'],
['2012-07-11', 5],
['2012-07-13', 1],
['2012-07-14', 1]
]);
couple of questions:
- how do i get the header titles in the var data array?
- do double quotes or single quotes in array make a difference?
- am i passing the array $chartData from php to Google chart javascript correctly?
- the Google example has '[]' around the array, how do i get those around my array too?
(bwt, i know all about cakephp's Find(all) but I just got lost in documentation about how to get what i wanted and sql was much easier )

Answer 1

you are using json_encode in your controller, but in your view you are using -
google.visualization.arrayToDataTable($chartData);
json_encode creates json object, not and javascript array.
using json_encode in your controller function chart() try:
$chartData['cols'] = array(
array('id' => 'visit_date', 'label' => 'Visit date', 'type' => 'date'),
array('id' => 'count_visits', 'label' => 'Count', 'type' => 'number')
);
foreach($results AS $result) {
$time = strtotime($result[0]['visit_date']);
$dateJs = 'Date('.date("Y", $time).', '.(date('n', $time) - 1).', '.date('j', $time).')';
$row = array(
'c' => array(
array('v' => $dateJs),
array('v' => $result[0]['count_visits']),
)
);
$chartData['rows'][] = $row;
}
//make the data available for view
$this->set('chartData', json_encode($chartData);
in your view use :
var data = new google.visualization.DataTable($chartData);