Lançado Adianti Framework 7.6!
Clique aqui para saber mais
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 ...
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]-->

Pacotão Dominando o Adianti Framework 7
O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado! Versão 7.4


Dominando o Adianti 7 Quero me inscrever agora!

Comentários (6)


NR

Procure por erros javascript no console.
RR

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]-->
RR

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 ]
RR

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);
}
RR

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>
NR

Qual a ideia do trecho abaixo?
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 + ', '; } }

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.