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>
Related
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
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%'}
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)
});
I have the following piece of code to display map in my test web page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAvY_htg5RzYE1oj2BL4bFvxSRc9RmgUY0ng1PT46gfsZ_uuISzxROX5ZCo6sw1juxfGN03mgyAPAIoA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(xxx,xxx), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("xxxxxxxxxxxx");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 300px; height: 250px; margin:auto;"></div>
</body>
</html>
I want to redirect to GOOGLE MAP site with exact address location which i used to display Location in Map IF I CLICK ON MAP LOCATION.Hope you understand my requirement. Is it possible?
you could try something like
function returnMapUrl(GLatLngObj){
var point= GLatLngObj || map.getCenter();
return "http://maps.google.com/?ll="+point.lat+','+point.lng;
}
GEvent.addListener(map,"click", function(overlay, latlng) {
window.location = returnMapUrl(latlng);
});
how to set google map in the centre of a small <div>?
below is the code
below code is working fine but the city is display in the top corner of the <div>
how to move that in the center of <div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAdsfdspeATWBO-DG9lMgJ0ShhR6-O8wdUc0uGLMinc7m1CWtOdsfdsfsdqG9fPRwilSPzZoK_0Q" type="text/javascript"></script>
<script type="text/javascript">
function showLocation(address)
{
var map = null;
var geocoder = null;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas_small"));
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found .");
} else {
map.setCenter(point , 13);
}
}
);}
}
}
</script>
</head>
<body onunload="GUnload()">
<div id="map_canvas_small" style="width: 208px; height:80px "></div>
<script type="text/javascript">
{
showLocation('Madrid, Spain');
}
</script>
</body>
</html>
What browser do you use?
I test your code in different browser and have normal centering.
Perhaps the problem is browser or OS?