load data in google piechart - javascript

I am trying to make a piechart with the google piechart api..I am making this all clientside(html and javascript only)
What I want to do is the following when my webpage loads: load the chart with data, but when I select some other topic through a dropdownlist it should load other data in the chart...
<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);
var Samplevalue =document.getElementById("SampleVAL").value;
function drawChart() {
if(Samplevalue.value="ergo01")
{
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 12.10],
[' Ruminococcus', 6.44],
['Christensenellaceae', 6.15],
['Oscillospira', 13.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
]);
}
else if(Samplevalue.value="ergo02")
{
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 25.10],
[' Ruminococcus', 60.44],
['Christensenellaceae', 66.15],
['Oscillospira', 103.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
]);
}
else {
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 25.10],
[' Ruminococcus', 60.44],
['Christensenellaceae', 66.15],
['Oscillospira', 103.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
alert("hier"); ]);
}
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script>
function myFunction() {
var e = document.getElementById("SampleVAL").value;
//var strUser = e.options[e.selectedIndex].value;
alert(e);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<select id="SampleVAL" value="none">
<option value="ergo01">sample1</option>
<option value="ergo02">sample2</option>
<option value="ergo03">sample3</option>
</select>
<button onclick="drawChart()">Try it</button>
</body>
</html>
The issue was that the chart wasn't loading, thanks to #Sourabh Agrawal its working now...I would like this chart to like a little bit more fancy... I am trying to animate it according to google documents .. I should add in the chart options block the following: >>animation:{ >>duration: 1000, easing: 'out', but somehow it isn't working I want my chart to animate as the chart in the following link: navels.yourwildlife.org/explore-your-data Is this possible with google charts?

here is the js Fiddle link to your problem.
https://jsfiddle.net/b7rax1jc/
while comparing values you use "==" and not "="
"=" is for assignment.
2.SampleVAL already contains the value of dropsown so you dont need to use SampleVAL.value when comparing
var Samplevalue =document.getElementById("SampleVAL").value;
if(Samplevalue == "ergo1")

Related

How to add links to Google GeoChart maps?

I am trying to create a custom clickable map using GeoChart from Google for a website. I want countries to be clickable, where once users select different countries on the map, it would direct them to a separate web page. Also, I want the color to change when it's in a selected state.
Can someone help me with the JavaScript on how to add the select event? I would appreciate it.
Below is the code I have so far.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>
As you can see in my code you need to add a listener which is the google.visualization.events.addListener. Then inside that listener, you can get the name of the selected country. I printed by console.log() function you can do whatever you like with that.
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var country = data.getValue(selectedItem.row, 0);
console.log(country);
}
}); };
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>

google charts histogram not using histogram.bucketSize option

I'm trying to make a basic histogram with Google Charts, but for some reason it's not using the bin width that I set. Below is a code sample:
<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([
['MyData', 'Value']
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .8]
]);
var options = {
title: 'My Histogram'
, legend: { position: 'none' }
, histogram: {
bucketSize: .1
}
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and here's an image of what happens:
but what I would like to happen would be for the bins to be uniformly sized at a width of 0.1.
This appears to be a bug introduced in Charts API version 44. You can roll back to version 43 by specifying the version number when you load the library:
google.charts.load("43", {packages:["corechart"]});
It seems like this is the result of a bug that can be fixed by adding hAxis: { type: 'category' } to the options.

Google Material chart Column Chart (Bar chart) custom column color not working

I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.
I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//google.charts.load('current', {'packages':['bar']});
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);*/
var data = google.visualization.arrayToDataTable([
['Class', 'Total'],
['A', 10],
['B', 30],
['C', 20],
['D', 30]
]);
var options = {
isStacked: true,
title: 'Class wise total students',
colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
The chart is like:
But I want 4 different colors for 4 columns.
Thanks in advance.
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.
The chart is like ....

Number format of axis - Google Gauge

I am trying to change the number format of the axis on a google gauge. By default, the axis value is a whole number (e.g. 0, 120) but I would like to show a £ sign and format as currency (e.g. £0, £120). I have been able to change the format of the value shown at the bottom of the gauge using NumberFormat but cannot apply to the rest of the gauge.The code for the basic gauge is as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Spend', 80],
]);
var options1 = {
width: 500, height: 300
};
// change number format to £
var formatter = new google.visualization.NumberFormat(
{pattern: '£###,###'});
formatter.format(data1, 1);
var chart = new google.visualization.Gauge(document.getElementById('chart_div1'));
chart.draw(data1, options1);
}
</script>
</head>
<body>
<div id="chart_div1"></div>
</body>
</html>
How do I add a £ sign to the numbers on the outside of the gauge? Thank you.
You can provide an array of strings to majorTicks to specify your own...
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Spend', 80],
]);
var options1 = {
width: 500, height: 300,
majorTicks: [
'£0', '', '', '', '£100'
]
};
// change number format to £
var formatter = new google.visualization.NumberFormat({
pattern: '£###,###'
});
formatter.format(data1, 1);
var chart = new google.visualization.Gauge(document.getElementById('chart_div1'));
chart.draw(data1, options1);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>

Google geochart not taking text data

I'm trying to use Google Marker Geocharts for plotting user location event data. Here is the example code of google which i'm using..
<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(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', '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>
</html>
Above is working fine.But, the moment i try to use user location event data(as showing in below)..
var data = google.visualization.arrayToDataTable([
['City', 'Event', 'Year'],
['Rome', 'Birth', '1981'],
['Milan', 'Schooling', '1995-2005']
]);
It's started showing this error -
I searched a lot in google but, did not get any reliable answer. Any idea how to resolve this error ?
Regards

Categories