Google Charts External Javascript Issue - javascript

My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz

I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});

Related

Google chart Download and save PNG file

Here's my google pie chart. Right now, I can right click and save image as PNG.
However I need the image download to happen automatically on a specified folder when the page loads.
I tried various canvas options however couldn't get anything to work.
Download SVG as a PNG image
save google gauge chart as a png
Can someone help?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img src=' + chart.getImageURI() + '>';
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="JSFiddle">
<div id="piechart_3d" style="width: 1100px; height: 500px;"></div>
</div>
</body>
</html>
You can achiev a download with the download html-attribute.
example:
<a href="/image.png" download>
To achiev that in your app do this:
add a download link
<a id="download_link" href="/" download="">download</a>
and change its href attribute as soon as the chart loaded
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
});
if you want to download to happen automatically as soon as the page loaded:
make the a tag invisible
<a style="display:none" id="download_link" href="/" download="">download</a>
and fire a click event directly on it
document.getElementById("download_link").click();
so the google.visualization.events.addListener function should look like this:
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
the whole code should look like this: (auto-download)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="piechart_3d"></div>
<a style="display:none" id="download_link" href="/" download>download</a>
</body>
<script>
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
chart.draw(data, options);
}
</script>
</html>
selecting a folder to put in the download is not possible (for security reasons)

jvectormap map and markers

This is my default html file for web app project. I get error:
JavaScript runtime error: '$' is undefined
I presume that there is a problem with jquery. This is my first time dealing with html and java script, all advice appritiated.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-jvectormap-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-jvectormap-world-mill.js" type="text/javascript"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function () {
$('#world-map-markers').vectorMap({
map: 'world_mill',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{ latLng: [41.90, 12.45], name: 'Vatican City' },
{ latLng: [43.73, 7.41], name: 'Monaco' },
{ latLng: [-0.52, 166.93], name: 'Nauru' }
]
});
});
</script>
</body>
</html>
Thanks in advance.

Colour change of the line in area chart using google Charts API

I have a line chart created in Google Charts API, Now I want to change the LIne Colour and body colour differently,But when i created a chart i can see line and body colour same , please can any one let me know how to change the colours using google API
<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 data = google.visualization.arrayToDataTable([
['',''],
['',27],
['',25],
['',60],
['',31],
['',25],
['',39],
['',25],
['',31],
['',26],
['',28],
['',80],
['',28],
['',27],
['',31],
['',27],
['',29],
['',26],
['',35],
['',70],
['',25]
]);
var options = {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3},
'is3D':true,
series: {0:{color:'#DF013A',lineWidth:2}},
colors:['#D8D8D8'],
backgroundColor: "transparent",
legend: {position: 'none'}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
</body>
</html>
<body>
<div id="chart_div"></div>
</body>
</html>
Please refer the below developer documentation to change the line series color and the background color:
Line series color
BG color

Geocharts unable to acept data table from Google Spreadsheet Query

Having issue with reading the Excel file on the URL.
Works fine with bar chart, line charts and pie charts.
Geomap code gives this error:
google.setOnLoadCallback(drawVisualization);
HTML:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0Aih8-LAKMBsKdHRBSllqYkZnS2pfWWtGY2JueHdaRmc&usp=sharing,');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: 'US', // US
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
<head>
<title>NSF Data Online </title>
</head>
<span id='chart_div'></span>
</body>
</head>
<body>
<div id="chart_div" style="width: 700px; height: 500px;"></div>
</body>
<title>Welcome to My Web Page</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<meta content="MSHTML 6.00.2800.1400" name="GENERATOR">
</head>
<body>
These changes must be reflected in the web page .
</body>
<hr>
</html>

Google Visualization full browser window

I have this google visualization and I would like to maki it full screen on my browser window: http://cl.ly/image/1y0U1m1o2m0m
The code is:
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var a = <?=$elos?>;
var data = google.visualization.arrayToDataTable(a);
var options = {
title: 'blah blah blah',
//curveType: "function",
width: $(window).width(),
height: $(window).height(),
vAxis: {
minValue:800,
maxValue:2000,
textStyle: {color: 'black'}
},
legend:{position: 'none'}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>
Even though it is set to window size and it creates a rect for the size of the window there is a lot of free space around the chart
To make chart be full page size:
chartArea: {width: '90%', height: '90%'}

Categories

Resources