Develop Reference

How to update a Google Chart periodically?

Currently, I'm trying to update the value of my Google Line Chart. My aim is to update it periodically, so that I can obtain the result of a dynamic chart. Right now I need to refresh the whole page, but this is not a good solution.
I tried with setTimeout() function, but recalling the function drawChart() doesn't seem to be working. Here is my JavaScript code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
// The intervals data as narrow lines (useful for showing raw source data)
var options = {
title: 'Valores de LDR1',
vAxis: { ticks: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]},
curveType: 'function',
lineWidth: 4,
legend: 'none'
}
var ldr1 = new google.visualization.LineChart(document.getElementById('ldr1'));
var ldr2 = new google.visualization.LineChart(document.getElementById('ldr2'));
var ldr3 = new google.visualization.LineChart(document.getElementById('ldr3'));
var ldr4 = new google.visualization.LineChart(document.getElementById('ldr4'));
var data = google.visualization.arrayToDataTable(<?php prueba('ldr1') ?>);
var data2 = google.visualization.arrayToDataTable(<?php prueba('ldr2') ?>);
var data3 = google.visualization.arrayToDataTable(<?php prueba('ldr3') ?>);
var data4 = google.visualization.arrayToDataTable(<?php prueba('ldr4') ?>);
ldr1.draw(data, options);
options["title"] = "Valores de LDR2";
ldr2.draw(data2, options);
options["title"] = "Valores de LDR3";
ldr3.draw(data3, options);
options["title"] = "Valores de LDR4";
ldr4.draw(data4, options);
updateChart();
setTimeout(drawChart, 1000);
}
The php code get values from the database, so as I see it, I only have to repeat the code of the function drawChart(), but this doesn't happen.

Google charts javascript error

I'm trying to display a google pie chart from data recovered from excel sheet.
The returned String is described below which I'm passing in google.visualization.arrayToDataTable();
The code that I have used is:
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
var str = '<%= JSNstring %>'; //returned string from C#.
var res= str.replace(/""/g,"'");
res=res.replace(/"/g,"'");
//
var ss=[res];
document.write(ss); //the output of this is:
[['Solution','TOTAL'],['Check',23],['FULL',18],['POP',109]]
function drawChart() {
var data = google.visualization.arrayToDataTable(ss);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
This is showing error :
JavaScript runtime error: First row is not an array.
Please tell me what I'm doing wrong and how to correct it.
Thanks in advance.

`document.write(ss);`
Is only for this example, right? If it not so remove it and try to see inside your function what is the value of ss, like this-
function drawChart() {
console.write(ss);
var data = google.visualization.arrayToDataTable(ss);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
Update
Try to rewrite your function drawChart() like this-
function drawChart() {
var str = '<%= JSNstring %>'; //returned string from C#.
var res= str.replace(/""/g,"'");
res=res.replace(/"/g,"'");
//
var ss=[res];
var data = google.visualization.arrayToDataTable(ss);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
Update 2
I created for you jsfiddle here jsfiddle, with your array in hard code, as you can see it is working here.So your problem is something with the server side or with the value of ss.

I think you need to parse the string into an array, try this...
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
var str = '<%= JSNstring %>'; //returned string from C#.
var res= str.replace(/""/g,"'");
res=res.replace(/"/g,"'");
var ss='[' + res + ']';
function drawChart() {
var data = google.visualization.arrayToDataTable(eval(ss));
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}

Google Visualization Charts ajax data

I'm trying to dynamically render a google visualization chart with an AJAX call in flask to set the data. User enters input then clicks a link which calls the ajax function to get the data. the "/ajax_test" view will return a json object but the problem I have is i don't know how to correctly pass the data back into the DataTable function. How do i pass the json data i'm getting from ajax to a variable for the drawchart function?
Chart function:
<script type="text/javascript">
function drawChart(){
var data = new google.visualization.DataTable(jsondata);
var options = {
explorer: {},
}; //end options
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Ajax function:
<script type=text/javascript>
$(function() {
$('a#DrawChart').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/ajax_test',
{//input data sent to view}
, function(data) {
var jsondata = data.test_json;
drawChart();
});
return false;
});
});
</script>

This method doesn't know where jsondata comes from:
function drawChart() {
var data = new google.visualization.DataTable(jsondata);
...
}
Add jsondata as a parameter:
function drawChart(jsondata) {
var data = new google.visualization.DataTable(jsondata);
...
}
And then in your Ajax call pass jsondata to the method:
function(data) {
var jsondata = data.test_json;
drawChart(jsondata);
}

I have done something similar using the following code, this is a jinja2 example, so you have do adapt your code (change the way jsonData var is initialized):
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages': ['corechart']});
google.setOnLoadCallback (createChart);
var jsonData = {{ value_columns | tojson | safe }}
function createChart() {
var dataTable = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
//define options for visualization
var options = {is3D: 'no', title: 'Some Title' };
attachRedrawForTab(chart, dataTable, options);
attachRedrawForAccord(chart, dataTable, options);
//draw our chart
chart.draw(dataTable, options);
}
</script>

how to create a file inside the django template

i am generating the google charts and converting them into the image by using getimageuri() method. this method returns a url and now i need to store that url into file.
i dont know how to create a file inside the django template and how to store data into it.
following is my chart genearting code in javascript :
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart','table']});
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Job-Names', 'Pass', 'Fail'],
{{data.0.0|safe}}
]);
var options = {
title : 'Jenkins Job Details for project {{data.0.1}}',
vAxis: {title: "Job Names" , textStyle : {fontSize : 10} },
hAxis: {title: "Number of Builds" , ticks : [2,4,6,8,10] },
is3D: true,
width: 1250,
height: 550,
colors : ["#008000", "#cc0000"],
pointSize: 4
};
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
imageurl = chart.getImageURI()
});
chart.draw(data, options);
//var table = new google.visualization.Table(document.getElementById('table_div'));
//table.draw(data, {showRowNumber: false});
}
google.setOnLoadCallback(drawVisualization);
that imageurl i need to store into the file.
any help will be appreciated.

The getimageuri() actually return the file itself, uriencoded, which looks like:
data:image/png;base64,iVBORw0KGgoAA...
If you want to store this image server side, you have to send it to the server, preferably using AJAX, and then processing on server side by throwing away the text before the , including, and then creating an image file from the base64 string using django's File functions.

Google Chart API - using JS to dynamicaly add data

Morning, I have the data hidden in the page but im not sure how to add it to the addRows function.
This is what I have:
google.load("visualization", "1", {packages:["corechart"]});
$(document).ready(function(){
var rowArray = [];
$('input[name=device_name]').each(function(i){
var name = $(this).val();
var amount = $(this).next().val();
rowArray.push(["'" + name + "'", amount]);
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Device');
data.addColumn('number', 'Amount');
data.addRows( rowArray );
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 600,
height: 340,
title: 'Handheld Device Usage',
hAxis: {
title: 'Mobile Device Name',
titleTextStyle: {
color: '#404040'
}
}
});
}
});
Can anyone see where im going wrong?
Regards,
Phil

Maybe this will work:
$('input[name=device_name]').each(function(i){
var name = $(this).val();
var amount = ($(this).next().val() * 1);
rowArray.push([name, amount]);
});

the problem is that amount is a string... I've seen that you're using a js framework so you could probably make a console.log(rowArray); to debug.
a good way to correct that would be if you change this:
var amount = $(this).next().val().toInt();
I've tested it http://jsfiddle.net/TfsFT/1/ and its working. Although i had to change a few things cause i was using Mootools.. and i didn't have the html code :P
Good Luck!