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",
Related
I am trying to plot a horizontal target line across the scatter at y=10. Please help.
I've tried doing it with combochart, but I lose my annotation/text
<html>
<head>
<title>Testing</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Age');
data.addColumn('number', 'Weight');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'})
data.addRows([[ 18, 22,'A','TEST1'],[ 14, 7.5,'B',null],[ 15, 13,'C','TEST2'],[ 14, 15,'D','TEST3'],[ 5.3, 3.9,'E',null],[ 9.5, 17,'F','TEST 4']]);
// Set chart options
var options = {'title':'Age vs Weight',
'width':550,
'height':400,
'legend': 'none',
'trendlines':{0:{type:'linear',color:'green',}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ScatterChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
I expect the output to be the same chart, with a green line # y=10 instead of the trend-line. Thanks.
be sure to add the data for the horizontal line after the annotation columns...
var data = new google.visualization.DataTable();
data.addColumn('number', 'Age');
data.addColumn('number', 'Weight');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'})
data.addColumn('number', 'y0');
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Age');
data.addColumn('number', 'Weight');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'})
data.addColumn('number', 'y0');
data.addRows([[ 18, 22,'A','TEST1',10],[ 14, 7.5,'B',null,10],[ 15, 13,'C','TEST2',10],[ 14, 15,'D','TEST3',10],[ 5.3, 3.9,'E',null,10],[ 9.5, 17,'F','TEST 4',10]]);
var options = {'title':'Age vs Weight',
width: 550,
height: 400,
legend: 'none',
trendlines: {0:{type:'linear',color:'green',}},
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>
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>
I am trying to add a google pie chart in my web page. I have my results calculated and stored in several html span tags.
How could i pass those values to google chart in order to draw a pie char accordingly.
<div id="emission">
<div>Air Travel: <span id="airtotalresult"></span></div>
<div>Ground Travel: <span id="groundtotalresult"></span></div>
<div>Home Energy: <span id="hometotalresult"></span></div>
<div>Diet: <span id="diettotalresult"></span></div>
<div>Expenditure:<span id="shoppingtotalresult"></span> </div>
<div>Waste: <span id="wastetotalresult"></span></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
// ... draw the chart...
</script>
Thank you.
You can make a pie chart following googles tutorial https://developers.google.com/chart/interactive/docs/gallery/piechart
For a flat pie chart add this in the 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([
['option 1', 'Hours per Day'],
['option 2', 11],
['option 3', 2],
['option 4', 2],
['option 5', 2],
['option 6', 7] //name and the data
]);
var options = {
title: 'chart name' //name of the chart
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
Then paste this in the body
<div id="piechart" style="width: 900px; height: 500px;"></div>
This code block is working well on page is loading--
<script type="text/javascript">
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[22.1589, 90.1165, 'BARGUNA'],
[22.6953, 90.3538, 'BARISAL'],
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var map = new google.visualization.Map(document.getElementById('map_canvas'));
map.draw(data, options);
}
</script>
This code block is for a specific div hover event. But it is not working--
<script>
$(function () {
$('#tab-dhakadivision').hover(function () {
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[23.78069, 90.41932, 'DHAKA'],
[23.60113, 89.83923, 'FARIDPUR'],
[24.11119, 90.42584, 'GAZIPUR']
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var dmap = new google.visualization.Map(document.getElementById('map_canvas'));
dmap.draw(data, options);
}
});
});
</script>
Any suggestion ?
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