I'm trying to generate a line chart like Google charts but the lines do not form and I do not know why. The chart up appears with the captions most does not work below my code (the button that calls the chart):
$("#config2").on("click", function() {
$("#f").val("2");
google.charts.load('current', {'packages':['corechart']});
function drawChart() {
var i = $("#i2").val();
var m = $("#in").val();
var d = $("#te").val();
var f = $("#f").val();
// call ajax function to get sports data
var jsonData = $.ajax({
url: "dadosestatistica.php",
type: 'GET',
dataType: "json",
data : {i: i, m: m, d: d, f: f},
async: false
}).responseText;
//The DataTable object is used to hold the data passed into a visualization.
var data = new google.visualization.DataTable(jsonData);
var options = {
chart: {
title: 'Gráfico de Crimes Estado Rio de Janeiro'
}
};
// To render the pie chart.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
});
The statistics data that the array generates:
$data = "";
$rows = array();
$retorno = array();
$retorno['cols'] = array(
array('label' => 'DATA', 'type' => 'string'),
array('label' => 'VALOR1', 'type' => 'number'),
array('label' => 'VALOR2', 'type' => 'number'),
array('label' => 'VALOR3', 'type' => 'number'),
array('label' => 'VALOR4', 'type' => 'number'),
array('label' => 'VALOR5', 'type' => 'number'),
array('label' => 'VALOR6', 'type' => 'number'),
array('label' => 'VALOR7', 'type' => 'number'),
array('label' => 'VALOR8', 'type' => 'number'),
);
while ($row = mysqli_fetch_assoc($res)) {
$temp = array();
if($data != $row['data']){
$data = $row['data'];
$temp[] = array('v' => (string)converte_data($row['data']));
}
$temp[] = array('v' => (int)$row['total']);
$rows[] = array('c' => $temp);
}
$retorno['rows'] = $rows;
$jsonTable = json_encode($retorno);
echo $jsonTable;
Array output:
{"cols":[
{"label":"DATA","type":"string"},
{"label":"VALOR1","type":"number"},
{"label":"VALOR2","type":"number"},
{"label":"VALOR3","type":"number"},
{"label":"VALOR4","type":"number"},
{"label":"VALOR5","type":"number"},
{"label":"VALOR6","type":"number"},
{"label":"VALOR7","type":"number"},
{"label":"VALOR8","type":"number"}
],
"rows":[
{"c":[{"v":"30\/10\/2017"},{"v":1}]},{"c":[{"v":3}]},{"c":[{"v":1}]},{"c":[{"v":1}]},{"c":[{"v":1}]},{"c":[{"v":4}]},{"c":[{"v":1}]},{"c":[{"v":4}]}
]
}
I have already broken my mind and can not figure out how to solve it, thanks in advance for any help.
I discovered the reason for not working the array should be mounted like this:
{"cols":[
{"label":"DATA","type":"string"},
{"label":"VALOR1","type":"number"},
{"label":"VALOR2","type":"number"},
{"label":"VALOR3","type":"number"},
{"label":"VALOR4","type":"number"},
{"label":"VALOR5","type":"number"},
{"label":"VALOR6","type":"number"},
{"label":"VALOR7","type":"number"},
{"label":"VALOR8","type":"number"}
],
"rows":[
{"c":[{"v":"30\/10\/2017"},{"v":1},{"v":3},{"v":1},{"v":1},{"v":1},{"v":4},{"v":1},{"v":4}]},
{"c":[{"v":"31\/10\/2017"},{"v":2},{"v":4},{"v":3},{"v":2},{"v":4},{"v":3},{"v":2},{"v":5}]}
]
}
Every time you change the date is a new line the bank's data looks like this:
'VALOR1', '2017-10-30', '1'
'VALOR2', '2017-10-30', '3'
'VALOR3', '2017-10-30', '1'
'VALOR4', '2017-10-30', '1'
'VALOR5', '2017-10-30', '1'
'VALOR6', '2017-10-30', '4'
'VALOR7', '2017-10-30', '1'
'VALOR8', '2017-10-30', '4'
'VALOR1', '2017-10-31', '2'
'VALOR2', '2017-10-31', '4'
'VALOR3', '2017-10-31', '3'
'VALOR4', '2017-10-31', '2'
'VALOR5', '2017-10-31', '4'
'VALOR6', '2017-10-31', '3'
'VALOR7', '2017-10-31', '2'
'VALOR8', '2017-10-31', '5'
I'm not able to mount this array.