I have a bunch of sheets that I'm using to store the marks of my students for a couple of my classes. On my website, I am using HTML and Google's Query Language to pull info from the sheets (2 columns...the students numbers of each student and their mark). If I've edited the spreadsheet on any given day, the chart shows up properly, but if I have not edited it that day then it shows incorrect values for their marks or old values for their marks. I think it's something to do with the sheets, but I can't be sure.
Here's the HTML code from my site:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=14mPTcYYraMyuBnEFSJW74ZQ3xjWSSOuDqoxB2VrvAvw&tq=select%20D%2C%20E%20where%20D%3C%3E%22Avatar%22%20order%20by%20E%20desc%20label%20E%20%22Experience%20Points%22');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
var options = {'title':'Experience Points',
'width':'927',
'height':'510',
'chartArea': {'left':'50', 'width':'90%'},
legend: { position: 'top', maxLines: 2 },
hAxis: {showTextEvery: 1, slantedText: true, slantedTextAngle: 90, viewWindow:{max:33}},
bar:{groupWidth: '60%'},
isStacked: true};
chart.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>
Any ideas? By the way, the sheet is set so that anyone on the internet can find and view.
Related
Region 1
Region 2
I am trying to add map on a location page and I want to select some states from US and Canada in different regions when user hovers on a specific part of the map. Basically a map of North and South America(Brazil and Argentina) with different regions.
In the following code I attempted to highlight 2 US states and 1 Canada state. But I get "Requested map does not exist" error when I try to highlight states on a continent.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Offices'],
['New Jersey', 2],
['Alabama', 3],
['Toronto', 1]
]);
var options = {
region: '019', // Americas Continent
colorAxis: {
colors: ['#00853f', 'black', '#e31b23']
},
backgroundColor: '#81d4fa',
datalessRegionColor: 'gray',
defaultColor: '#f5f5f5',
resolution: 'provinces'
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 100%; height: 100%;"></div>
</body>
</html>
Is it possible to do so? How can I achieve something like the image attached?
I would really appreciate your time and help. Thank you!
This error occurs on this line:
chart.draw(data, google.charts.Line.convertOptions(options));
the error is:
Cannot read property 'vB' of undefined
the error is beautifully rendered by Google's Chart API like so:
the error appears to be internal to the Google Chart library. My code is as follows, it's working for one server I am using, but not for another server and I cannot figure out why this error is happening!
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
debugger;
google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawChart);
{
var to;
window.addEventListener('resize', function (event) {
clearTimeout(to); // throttle this call
if( window.memvizIsReady){
to = setTimeout(drawChart, 500);
}
});
}
function drawChart() {
window.memvizIsReady = true;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Time unit');
data.addColumn('number', 'RSS');
data.addColumn('number', 'Heap Total');
data.addColumn('number', 'Heap Used');
data.addRows(JSON.parse('{{{aa}}}'));
var options = {
hAxis: {title: "Entry every {{{ms}}} milliseconds."},
vAxis: {title: "Memory in Megabytes", format: 'decimal'},
chart: {
title: 'Node.js memory usage (RSS, Heap Used, Heap Total)',
subtitle: '(In megabytes.)'
},
width: window.innerWidth - (window.innerWidth)/20,
height: window.innerHeight - (window.innerHeight)/20,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
does anyone know what this error might be about? using the boolean memvizIsReady should prevent calling drawChart() before things are ready.
I was able to debug, and get the raw data going into this call:
the data looks like:
ughhh, f*cking Google..this happens when no data is collected yet.
data.addRows([]);
is what is happening, and apparently Google simple fails if there is no data. That's not good, am going to report them to developer jail.
Does Google Visualization allow on-load animations for pie charts? So far I have only been able to get on-load animations for column charts, but not for pie charts, bar charts, line charts or even a Google table chart for that matter.
this is the pie chart that I am trying to animate on-load:
<div id="piechart" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['FacultyName', 'SubmissionID'],
#Html.Raw(rows)]);
var options = {
title: '',
animation: {
duration: 1000,
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data1, options);
</script>
However the animate option doesn't seem to take place.
I'm using the Google visualization chart in my application for drawing a line chart. It works great except one thing in the hAxis the entered number converts itself to thousands like below. I know this is happening because im trying to display huge numbers but still i would like to know if there is way to get around this?
Code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Degree Level');
data.addColumn('number', 'Graduate or professional degree');
data.addColumn('number', "Bachelor's degree");
data.addColumn('number', "Associate's degree");
data.addColumn('number', "High school or vocational training");
data.addRows([
[2, 39758,93179, 78578,49141],
[3, 100747, 300646, 220982,100456],
[4, 49964, 68022, 21092,6943],
[5, 150370, 124868, 27120,8204]
]);
var options = {
chart: {
title: 'Education Report',
subtitle: 'distributed by experience'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Output
Can someone let me know how can i make the hAxis to display in number?
There are two solutions to get the format that you want.
Either you use version 1 of the corecharts package :
so load the package like this :
// instead of : google.load('visualization', '1.1', {packages: ['line']});
google.load('visualization', '1', { packages: ['corechart'] });
and call your chart like this :
// instead of : var chart = new google.charts.Line(document.getElementById('linechart_material'));
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
And you'll get what you want.
See a demo jsfiddle here.
Or alternatively,
Use version 1.1 of the package (you already do in your example) like this :
google.load('visualization', '1.1', {packages: ['line']});
and then specify in your chart options the vAxis format like this :
vAxis: { format: '###,###,###' },
and load the chart this way, so that the vAxis settings are taken into account :
chart.draw(data, google.charts.Line.convertOptions(options));
That'll work too.
See a demo jsfiddle here.
The problem here is that the way options are defined has changed from v.1 to v.1.1. So if you want to use the v.1.1 package you have to call google.charts.Line.convertOptions() for your options to be interpreted correctly.
this is my code:
<html>
<title>report</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function soso(){
var data_flow = new google.visualization.DataTable();
data_flow.addColumn('string', 'Version');
data_flow.addColumn('number','flow');
data_flow.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options = {width: 2200, height: 540,title: ''};
var chart_flow= new google.visualization.LineChart(document.getElementById('checkin-column'));
chart_flow.draw(data_flow, options);
}
function loveu()
{
var data_flow_1 = new google.visualization.DataTable();
data_flow_1.addColumn('string', 'Version');
data_flow_1.addColumn('number','flow');
data_flow_1.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options5 = {width: 2200, height: 540,title: ''};
var chart_flow_1= new google.visualization.LineChart(document.getElementById('redemption-table'));
chart_flow_1.draw(data_flow_1, options5);
}
function drawChart() {
soso();
loveu();
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<h4>dfs</h4><br>
<br><br>
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
</body>
</HTML>
When I delete: "< h4 > dfs < / h4 >" I get the charts working fine in iexplorer, but when I don't delete it, the first chart work fine but the second one the axis of it doesn't appear!! Try it and you will see that (on Internet Explorer).
I need a help in solving this issued, I am facing strange behavior of these charts when there is more than one in the same page
Problem: I have 3 charts on a page but the axis for the 3rd chart are not showing in IE
Resolution: I have the 3 divs as separate rows in a table and all 3 charts are now showing their axis!
Hope this helps.
Cheers