I have created a web2py application and uploaded it on pythonanywhere.com. In my application, I am using Google Charts API to create graphs and charts. It is working perfectly on my local system.
However, my application is unable to fetch this source when hosted on pythonanywhere.com and JavaScript console in the browser flashes the following error: "google not defined"
Is there a way out to use Google Charts API on pythonanywhere.com?
<!DOCTYPE html>
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{=T.accepted_language or 'en'}}"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge{{=not request.is_local and ',chrome=1' or ''}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{=response.title or request.application}}</title>
<meta name="application-name" content="{{=request.application}}">
<meta name="google-site-verification" content="">
<!-- include stylesheets -->
</head>
<body>
<input type="hidden" name="temp" id="temp" />
<form action="">
<table>
<tr>
<td><select class="form-control" style="width: 200px" name="subjects_tab1" id="subjects_tab1" onchange="tab1_js(this.value);jQuery('#temp').val(document.getElementById('subjects_tab1').value);ajax('{{=URL('default','dd')}}',['temp'],'question');get_comments(this.value)">
<option name="" value="" id="0"></option>
{{for s in subjects:}}
<option name="{{=s.id}}" id="{{=s.id}}" value="{{=s.id}}">{{=s.course_name}}</option>
{{pass}}
</select></td>
<td>
<select class="form-control" style="width: 900px" name="question" id="question" onchange="check(jQuery('#question').val())">
</select>
</td>
</tr>
</table>
</form>
<div id="HD" hidden>Hi</div>
<div id="HD1" hidden></div>
<div id="HD2" hidden></div>
<br /><div id="HD3" hidden></div><br />
<br /><div id="HD4" hidden></div><br />
<input id="id1" name="id1" value="" type="hidden"/>
<input type="hidden" id="err" name="err" ></input>
<div id="chart" ></div>
<div id="completed" style="width:400px; margin:0 auto;"></div>
</body>
</html>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data="",data2="";
var dict;
var total_data;
var que_wise_data=[];
var temperory = new Array(2);
var progress = new Array(2);
for(i=0;i<2;i++)
{
progress[i] = new Array(2);
}
var percent;
function tab1_js(str) /* Ajax function to get data from the controller */
{
if(str=="")
{
document.getElementById('HD').innerHTML = "Hi";
document.getElementById('chart').innerHTML = "";
document.getElementById('comments_list').innerHTML = "";
document.getElementById('completed').innerHTML = "";
return;
}
str = JSON.stringify({"id1":str});
var hr = new XMLHttpRequest();
hr.open("POST","tab1_con",true);
hr.setRequestHeader("Content-type", "application/json");
hr.onreadystatechange = function(){
if(hr.readyState==4 && hr.status==200){
data = hr.responseText;
document.getElementById('HD').innerHTML = data;
make_arrays();
}
};
hr.send(str);
}
function make_arrays() /* Function to make javascript objects from JSON string retrieved from the controller */
{
main_array = data.split("~");
//alert(typeof main_array[1]);
dict = JSON.parse(main_array[0]);
total_data = JSON.parse(main_array[1]);
document.getElementById('HD1').innerHTML = total_data[2];
que_wise_data=[];
for(i=2; i<main_array.length-1; i++)
{
que_wise_data[i-2] = JSON.parse(main_array[i]);
}
//document.getElementById("HD1").innerHTML = main_array[main_array.length-1];
temperory = (main_array[main_array.length-1]).split("/");
if(temperory[1]!=0)
{percent=(temperory[0]/temperory[1])*100;}
else
{percent=0}
giveMeter(percent);
report(total_data);
}
function report(total_data) /* Function to make javascript array from JSON string retrieved from the controller to make Column Chart */
{
var overall_report = new Array(total_data.length+1)
for(i=0; i<=total_data.length; i++)
{
overall_report[i] = new Array(2);
}
overall_report[0][0]="Attribute";
overall_report[0][1]="Score";
for(i=0; i<total_data.length; i++)
{
var temp_arr = JSON.stringify(total_data[i]);
var arr = JSON.parse(temp_arr);
overall_report[i+1][0]=arr[0];
overall_report[i+1][1]=arr[1];
}
document.getElementById('HD3').innerHTML = overall_report;
drawColumnChart(overall_report);
}
function que(temp) /* Function to make javascript array from JSON string retrieved from the controller to make Pie Chart */
{
var que_report = new Array(temp.length+1)
for(i=0; i<=temp.length; i++)
{
que_report[i] = new Array(2);
}
que_report[0][0]="Option";
que_report[0][1]="Score";
for(i=0; i<temp.length; i++)
{
var temp_arr = JSON.stringify(temp[i]);
var arr = JSON.parse(temp_arr);
que_report[i+1][0]=arr[0];
que_report[i+1][1]=arr[1];
}
document.getElementById('HD4').innerHTML = que_report;
drawPieChart(que_report);
}
google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawColumnChart);
function drawColumnChart(table)
{
var data = google.visualization.arrayToDataTable(table); /* JavaScript Console in browser shows error for this line: "google not defined" */
var view = new google.visualization.DataView(data);
var options = {
title: "Overall Attribute-wise Analysis",
width: 900,
height: 500,
vAxis: {format: 'percent'},
minValue: 0,
maxValue: 100,
bar: {groupWidth: "95%"},
legend: 'bottom',
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
chart.draw(view, options);
}
function check(i)
{
if(i==0)
{
report(total_data);
}
else
{
que(que_wise_data[dict[i]]);
}
}
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart(table) {
var data = google.visualization.arrayToDataTable(table);
var options = {
title: 'Question-wise Analysis',
legend: 'bottom',
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawMeter);
function giveMeter(p)
{
progress[0][0]="Label";
progress[0][1]="Value";
progress[1][0]=" ";
progress[1][1]=p;
drawMeter(progress);
}
function drawMeter(table) {
var data = google.visualization.arrayToDataTable(table);
var options = {
width: 360, height: 360,
greenFrom: (0.8*100), greenTo: (100),
yellowFrom:(0.5*100), yellowTo: (0.8*100),
redFrom:0, redTo:(0.5*100),
minorTicks: 5,
max: 100,
};
var chart = new google.visualization.Gauge(document.getElementById('completed'));
chart.draw(data, options);
}
</script>
giles
|
12651
posts
|
PythonAnywhere staff
|
