Here is my HTML
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2002"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2003"},{"v":"43"},{"v":"43"}]},
{"c":[{"v":"2004"},{"v":"43"},{"v":"43"}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"},
{"id":"","label":"expenses","type":"number"}
]
};
function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800, height: 480,
//isStacked:true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
If I enable isStacked option the pictuer shown is completely wrong
if I disable it the chart is fine
Let me know how to get the stacking to work.
after some testings I found the reason of the bug: you defined a strings in data instead of numbers, fixed page below:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var jsonDataObj = {
"rows":[
{"c":[{"v":"2001"},{"v":65},{"v":40}]},
{"c":[{"v":"2002"},{"v":67},{"v":43}]},
{"c":[{"v":"2003"},{"v":80},{"v":35}]},
{"c":[{"v":"2004"},{"v":97},{"v":47}]}
],
"cols":[
{"id":"","label":"Year","type":"string"},
{"id":"","label":"profits","type":"number"},
{"id":"","label":"expenses","type":"number"}
]
};
function drawChart() {
var jsonData = jsonDataObj;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800,
height: 480,
isStacked: true,
title: 'Company Performance'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Please, have a look at this example https://jsfiddle.net/912jggdw/
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
["Category", "A", "Total" ],
["Planned", 500, 500 ],
["Achieved", 400, 600 ]
]);
var options = {
width: 300,
height: 400,
legend: {position: "none"},
bar: { groupWidth: '75%' },
isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Another option would be using Google Image Charts.
And it is good because
1) it will work in all browsers including old ones, as it is a picture.
2) You can do Bullet Charts with it, when there is no option to do "Bullet Charts" in new Google Charts, and even the plain Diff Charts styled as "Bar and Column" does not work in latest versions of Firefox (I tried version 39).
Here is great example:
Read more about Google Image Charts here:
https://developers.google.com/chart/image/?hl=en
Related
I need to display google chart with dynamic json data. In this case it is a gauge chart with only one json item:
{
"Label": "1",
"Waterlevel": "82"
}
My code generates no error. But also no chart will be generated.
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: 'getWaterLevel',
dataType: 'JSON',
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Waterlevel');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].Label, jsonData[i].Waterlevel]);
}
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('waterlevel_div'));
chart.draw(data, options);
console.log(jsonData);
}
});
}
google.setOnLoadCallback(drawChart);
</script>
<div id="waterlevel_div" style=""></div>
the values for Waterlevel in the json are represented by strings,
which need to be converted to numbers.
try using parseFloat...
parseFloat(jsonData[i].Waterlevel)
EDIT: Seems to work fine here, with hard-coded json.
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
var jsonData = {
"Label": "1",
"Waterlevel": 82
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Waterlevel');
var row = [];
for (var key in jsonData) {
row.push(jsonData[key]);
}
data.addRow(row);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('waterlevel_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="waterlevel_div"></div>
Note: you're using an old version of google charts, which should no longer be used.
recommend using the newer library loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
instead of jsapi, according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
this will only change the load statement, see Update Library Loader Code...
Trying to put together my first google line chart, with JSON api data, in this (shortened) format:
{"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}}
From what I can tell, it needs to be in the format used below:
<html>
<head>
<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() {
var data = google.visualization.arrayToDataTable([
['Datetime', 'Battery Voltage, (V)'],
['2017-10-09T00:00:00.000Z', 12.50],
['2017-10-09T00:01:00.000Z', 12.44],
['2017-10-09T00:02:00.000Z', 12.43],
]);
var options = {
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
My question is: how do I get my json data into the correct format? ie:
{
"cols":[
{"label":"Datetime","type":"datetime"},
{"label":"Battery Voltage, (V)","type":"number"},
],
"rows":[{"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
{"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
]
}
using javascript, you can transform the json with the following snippet...
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
the above will create an array as follows...
[
["Datetime","Battery Voltage, (V)"],
["2017-10-09T00:00:00.000Z",12.5],
["2017-10-09T00:01:00.000Z",12.44],
["2017-10-09T00:02:00.000Z",12.43]
]
which then can be used with static method --> arrayToDataTable
to create the data table
var data = google.visualization.arrayToDataTable(chartData);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = {"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {
bottom: 48
},
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
So, I want to get a region of 'Lampung' but it is displayed as a region, not markers. My code is using geochart API. Here is my code :
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Province'],
['Lampung'],
['Banten'],
]);
var options = {
region: '035', //South-East Asia
displayMode: 'regions',
colorAxis: {colors: ['#00853f', 'blue', '#e31b23']},
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
But the problem is, the result doesn't show any regions yet. It's just a map without any displayMode. Next problem is, if I add this to 'options':
resolution: 'provinces'
The result is just a blank web without the map. What's wrong here?
I think your region '035' is too large, you should zoom your region to a smaller area, in your case, you should use options['region'] = 'ID';
You can try with the below code, it should show 2 orange regions in your map:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Province'],
['Lampung'],
['Banten']
]);
var options = {};
options['region'] = 'ID';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'regions';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
I have compared the script below to that in the google charts documentation at the following site:
https://developers.google.com/chart/interactive/docs/gallery/scatterchart
But it does not render. I cannot find anything wrong with this code. Is there something else I should be looking for?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['sepal_width', 'sepal_length'],
[3.5,5.1],
[3.0,4.9],
[3.2,4.7],
[3.1,4.6],
[3.6,5.0],
[3.9,5.4],
[3.4,4.6],
[3.4,5.0],
[2.9,4.4],
[3.1,4.9],
[3.7,5.4]
]);
var options = {
title: 'Edgar Anderson's Iris Data',
hAxis: {title: 'Petal Length', minValue: 0, maxValue: 7},
vAxis: {title: 'Petal Width', minValue: 0, maxValue: 3},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
title: 'Edgar Anderson's Iris Data',
needs to be:
title: "Edgar Anderson's Iris Data",
This is the code i'm using in my page to display maps with pointers database as latitude and longitude.
This Code displays the normal image as represented in the google maps, But as i need the grayscale map, itried it with the google api and got the JSON code but im worried, how to use up the json code that the map displays in Greyscale.
This is the script present in my page:- below this is the JSON code from Google maps
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfJRXkzFVohAp-Okxjr5B7xR_ljEFASla9K2hAbTooXc5TaM12hShF8opt9JtUXJpFbuViIHs05-CNg" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
if (GBrowserIsCompatible()) {
var latitude = <?php echo $store_details->latitude; ?>;
var longitude = <?php echo $store_details->longitude; ?>;
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(latitude,longitude),13);
var marker = new GMarker(new GLatLng(latitude,longitude));
map.addOverlay(marker);
}
});
//]]>
</script>
This is the JSON code:
[ { stylers: [ { saturation: -100 }, { visibility: "on" } ] } ]
You are using Version 2 of the API, which does not have styled maps. You need to use Version 3 to make that functionality available. Version 3 is quite different from Version 2. New projects should definitely use Version 3, and Version 2 projects will stop working in May 2013.
Greyscale map adapted from Google's rather garish example:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
var MY_MAPTYPE_ID = 'Greyscale';
function initialize() {
var graystyle = [
{
featureType: "all",
elementType: "all",
stylers: [ { saturation: -100 }, { visibility: "on" } ]
}
];
var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var styledMapOptions = {
name: "Greyscale"
};
var grayMapType = new google.maps.StyledMapType(graystyle, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, grayMapType);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>