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.
Related
I am using google pie chart my json value is:
[
["Exhibitor Fee", 21],
["Attendee Registration", 400],
["Hotel Cost Per Night", 21212],
["Sponsorship", 435],
["Shippng", 456]
]
And my code is:
var jsonValues = '<?php echo $staticEvent; ?>'
var pieValues = $.parseJSON(jsonValues);
console.log(pieValues);
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(pieValues);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
by the looks of things here the pie chart expects the first array to be the headers for your chart, which i would imagine should be strings, whereas your first array is string, int
Try changing your json to:
[
["Activity", "Cost"],
["Exhibitor Fee", 21],
["Attendee Registration", 400],
["Hotel Cost Per Night", 21212],
["Sponsorship", 435],
["Shippng", 456]
]
how are you,
Try it:
in your php var $staticEvent; you change to:
<?php
$staticEvent = json_encode($staticEvent, JSON_UNESCAPED_UNICODE);
?>
And your JS:
var jsonValues = '<?php echo $staticEvent; ?>';
var pieValues = $.parseJSON(jsonValues);
console.log(pieValues);
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(pieValues);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
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);
}
I have a PHP script - in which I'm creating google.visualization.Table object in javascript.
I want to send the table created via Email - but for now the email is sent as empty...
EDIT:
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
var data;
function drawTable() {
data = new google.visualization.DataTable();
$datacols
data.addRows($alldata);
var table = new google.visualization.Table(document.getElementById('table_div'));
var formatter = new google.visualization.ColorFormat();
formatter.addRange(null, 0, 'red', null);
$formatcols
allowHtml=true;
var cssClassNames = { 'tableCell': 'mycell-td', 'headerCell': 'myhead-td gradient'};
table.draw(data, {allowHtml: true, width: '100%',showRowNumber: false, 'cssClassNames': cssClassNames});
document.getElementById('Download_CSV').style.visibility = \"visible\"; //Enable download CSV button when data is available
</script>
The script above is concatenated to a string with additional code, and then sent by email.
Does anyone know how can I do it?
Thank you!
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.
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!