RR
Ajuda com geração de graficos via api do google
Pessoal bom dia! estou precisando de uma ajuda pois estou tentando gerar um calendar chart do google so que tentei seguir um exemplo do codigo que tem no proprio framework na hora de chamar na aparece nada gostaria que alguem me desse uma help ai segue abaixo o exemplo do codigo:
google_calendar_chart.html
<!--[main]-->
<div id="chart_calendar_div_{$uniqid}" style="width: {$width}; height: {$height};"> <i class="fa fa-spinner fa-pulse fa-2x fa-fw">Loading </div>
<script>
$(function() {
if (typeof Adianti.chartsQueue == 'undefined')
{
Adianti.chartsQueue = new Array;
}
function render_charts()
{
Adianti.chartsLoaded = true;
while (Adianti.chartsQueue.length > 0)
{
next = Adianti.chartsQueue.shift();
next();
}
}
var render_calendar_chart = function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('chart_calendar_div_{$uniqid}'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
if (Adianti.chartsQueue.length == 0) {
Adianti.chartsQueue.push( render_calendar_chart );
if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
jQuery.ajax({
type: "GET",
url: "https://www.gstatic.com/charts/loader.js",
success: function() {
google.charts.load('current', {'packages':['calendar']});
google.charts.setOnLoadCallback(drawChart);
},
dataType: "script",
cache: true
});
}
else {
render_calendar_charts();
}
}
else
{
Adianti.chartsQueue.push( render_calendar_chart );
}
});
</script>
<!--[/main]-->
google_calendar_chart.html
<!--[main]-->
<div id="chart_calendar_div_{$uniqid}" style="width: {$width}; height: {$height};"> <i class="fa fa-spinner fa-pulse fa-2x fa-fw">Loading </div>
<script>
$(function() {
if (typeof Adianti.chartsQueue == 'undefined')
{
Adianti.chartsQueue = new Array;
}
function render_charts()
{
Adianti.chartsLoaded = true;
while (Adianti.chartsQueue.length > 0)
{
next = Adianti.chartsQueue.shift();
next();
}
}
var render_calendar_chart = function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('chart_calendar_div_{$uniqid}'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
if (Adianti.chartsQueue.length == 0) {
Adianti.chartsQueue.push( render_calendar_chart );
if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
jQuery.ajax({
type: "GET",
url: "https://www.gstatic.com/charts/loader.js",
success: function() {
google.charts.load('current', {'packages':['calendar']});
google.charts.setOnLoadCallback(drawChart);
},
dataType: "script",
cache: true
});
}
else {
render_calendar_charts();
}
}
else
{
Adianti.chartsQueue.push( render_calendar_chart );
}
});
</script>
<!--[/main]-->
Procure por erros javascript no console.
Nataniel eu fiz a mudança no código e usei o console conforme você me repassou segue abaixo:
<!--[main]-->
<div id="chart_calendar_div_{$uniqid}" style="width: {$width}; height: {$height};"> <i class="fa fa-spinner fa-pulse fa-2x fa-fw">Loading </div>
<script>
//console.log({$data});
var data_array = {$data};
var total_array = data_array.length;
$(function() {
if (typeof Adianti.chartsQueue == 'undefined')
{
Adianti.chartsQueue = new Array;
}
function render_charts()
{
Adianti.chartsLoaded = true;
while (Adianti.chartsQueue.length > 0)
{
next = Adianti.chartsQueue.shift();
next();
}
}
var dados_calendario;
dados_calendario = '';
for(i = 0; i < data_array.length; i++)
{
dados_calendario = dados_calendario + '[ new Date(2018, 3, 13), ' + data_array[i].numero_os.replace(/[^0-9]/g, '0') + ' ]';
if(i < (data_array.length - 1))
{
dados_calendario = dados_calendario + ', ';
}
}
console.log(dados_calendario);
var render_calendar_chart = function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([dados_calendario]);
var chart = new google.visualization.Calendar(document.getElementById('chart_calendar_div_{$uniqid}'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
if (Adianti.chartsQueue.length == 0) {
Adianti.chartsQueue.push( render_calendar_chart );
if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
jQuery.ajax({
type: "GET",
url: "https://www.gstatic.com/charts/loader.js",
success: function() {
google.charts.load('current', {'packages':['calendar']});
google.charts.setOnLoadCallback(render_charts);
},
dataType: "script",
cache: true
});
}
else {
render_charts();
}
}
else
{
Adianti.chartsQueue.push( render_calendar_chart );
}
});
</script>
<!--[/main]-->
fiz os devidos tratamentos para passar dinamicamente os dados resultador do console:
[ new Date(2018, 3, 13), 1109135915 ], [ new Date(2018, 3, 13), 000000 ], [ new Date(2018, 3, 13), 1048 ], [ new Date(2018, 3, 13), 290069 ], [ new Date(2018, 3, 13), 290195 ], [ new Date(2018, 3, 13), 11090135915 ], [ new Date(2018, 3, 13), 11090136142 ], [ new Date(2018, 3, 13), 1109935353 ], [ new Date(2018, 3, 13), 1109136580 ], [ new Date(2018, 3, 13), 08201711 ], [ new Date(2018, 3, 13), 000 ], [ new Date(2018, 3, 13), 000 ], [ new Date(2018, 3, 13), 000 ], [ new Date(2018, 3, 13), 000 ], [ new Date(2018, 3, 13), 201402008 ], [ new Date(2018, 3, 13), 201502703 ], [ new Date(2018, 3, 13), 201503009 ], [ new Date(2018, 3, 13), 868299 ], [ new Date(2018, 3, 13), 868299 ], [ new Date(2018, 3, 13), 868299 ], [ new Date(2018, 3, 13), 00006119 ], [ new Date(2018, 3, 13), 4740405910 ], [ new Date(2018, 3, 13), 6539 ], [ new Date(2018, 3, 13), 6539 ], [ new Date(2018, 3, 13), 283451 ], [ new Date(2018, 3, 13), 76155 ], [ new Date(2018, 3, 13), 1838 ], [ new Date(2018, 3, 13), 2703 ], [ new Date(2018, 3, 13), 4762 ], [ new Date(2018, 3, 13), 5858 ], [ new Date(2018, 3, 13), 7175 ], [ new Date(2018, 3, 13), 7176 ], [ new Date(2018, 3, 13), 283498 ], [ new Date(2018, 3, 13), 1109143533 ], [ new Date(2018, 3, 13), 4129 ], [ new Date(2018, 3, 13), 4129 ], [ new Date(2018, 3, 13), 4129 ], [ new Date(2018, 3, 13), 1109135167 ], [ new Date(2018, 3, 13), 1109139566 ], [ new Date(2018, 3, 13), 293535 ], [ new Date(2018, 3, 13), 293556 ], [ new Date(2018, 3, 13), 289392 ], [ new Date(2018, 3, 13), 46774341 ], [ new Date(2018, 3, 13), 1567 ], [ new Date(2018, 3, 13), 1230 ], [ new Date(2018, 3, 13), 334 ], [ new Date(2018, 3, 13), 1390 ], [ new Date(2018, 3, 13), 1284 ], [ new Date(2018, 3, 13), 1285 ], [ new Date(2018, 3, 13), 1189 ], [ new Date(2018, 3, 13), 1400 ], [ new Date(2018, 3, 13), 5084 ], [ new Date(2018, 3, 13), 1109136142 ], [ new Date(2018, 3, 13), 11091365802 ], [ new Date(2018, 3, 13), 1109136580 ], [ new Date(2018, 3, 13), 1109935353 ], [ new Date(2018, 3, 13), 1109144338 ], [ new Date(2018, 3, 13), 02182916 ], [ new Date(2018, 3, 13), 02182916 ], [ new Date(2018, 3, 13), 84571 ], [ new Date(2018, 3, 13), 297316 ], [ new Date(2018, 3, 13), 02252493 ], [ new Date(2018, 3, 13), 02198088 ], [ new Date(2018, 3, 13), 04726002 ], [ new Date(2018, 3, 13), 297256 ], [ new Date(2018, 3, 13), 050025640 ], [ new Date(2018, 3, 13), 1516221 ], [ new Date(2018, 3, 13), 151442 ], [ new Date(2018, 3, 13), 80669 ], [ new Date(2018, 3, 13), 86481 ]
só que quando passo a variável com esse array para ele mostrar fica dando erro segue o código abaixo:
var render_calendar_chart = function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([dados_calendario]);
var chart = new google.visualization.Calendar(document.getElementById('chart_calendar_div_{$uniqid}'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
erro:
Uncaught Error: Every row given must be either null or an array.
at gvjs_P.gvjs_.fZ (jsapi_compiled_default_module.js:97)
at gvjs_P.gvjs_.Op (jsapi_compiled_default_module.js:98)
at drawChart (<anonymous>:43:18)
at render_charts (<anonymous>:19:13)
at HTMLDocument.<anonymous> (<anonymous>:75:13)
at j (jquery.min.js?afver=500:2)
at k (jquery.min.js?afver=500:2)</anonymous></anonymous></anonymous></anonymous>
Qual a ideia do trecho abaixo?
Pelo que entendi você está pegando um array(data_array) e transformando numa string(dados_calendario).
A função dataTable.addRows espera receber um array, pode ser esse o problema.