Im trying to display some figures using GeoChart for Malaysia Map, its working fine, if display it in world map. But when drill into Malaysia Map, GeoChart can't display the value for the state.
Did I miss out something?
<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([
['State', 'Data'],
['Kedah', 5],
]);
var options = {
region: 'MY',
displayMode: 'regions',
resolution: 'provinces',
};
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>
I am not familiar enough with the names of the provinces of Malaysia to know exactly how Google would render them, but I was able to color the provinces of Malaysia with the following code:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'State');
data.addColumn('number', 'Data');
data.addRows([
[{v:'MY-14', f:' Wilayah Persekutuan Kuala Lumpur'}, 42],
[{v:'MY-15', f:' Wilayah Persekutuan Labuan'}, 57],
[{v:'MY-16', f:' Wilayah Persekutuan Putrajaya'}, 38],
[{v:'MY-01', f:' Johor'}, 82],
[{v:'MY-02', f:' Kedah'}, 46],
[{v:'MY-03', f:' Kelantan'}, 51],
[{v:'MY-04', f:' Melaka'}, 72],
[{v:'MY-05', f:' Negeri Sembilan'}, 16],
[{v:'MY-06', f:' Pahang'}, 2],
[{v:'MY-08', f:' Perak'}, 87],
[{v:'MY-09', f:' Perlis'}, 29],
[{v:'MY-07', f:' Pulau Pinang'}, 49],
[{v:'MY-12', f:' Sabah'}, 26],
[{v:'MY-13', f:' Sarawak'}, 94],
[{v:'MY-10', f:' Selangor'}, 35],
[{v:'MY-11', f:' Terengganu'}, 79],
]);
var options = {
region: 'MY',
displayMode: 'regions',
resolution: 'provinces',
height: 600,
width: 800,
};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
}
Whenever using Google GeoCharts on a province level, I like to use the ISO-3166 alpha-2 province codes for that country since they will always work, and then I use the {value: 'ISO 3166 alpha-2 code', format: 'human readable province name'} trick to get it to display properly.
Related
I'm trying to use Google Charts and seem to be running into issues with titles not displaying. Im using a Column Chart and the vAxis title is not displaying. I also started to make a Material Line Chart and I'm running into the same issue.
Here's the Material Line Chart code:
<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','line']});
</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('string', 'Cycle ID');
data.addColumn('number', '5A Continuous');
data.addColumn('number', '10A Continuous');
data.addColumn('number', '20A Continuous');
data.addColumn('number', '10A Pulse');
data.addColumn('number', '20A Pulse');
data.addRows([
['1', 2548, 2319, 828, 2348, 2192],
['2', 2537, 2306, 829, 2362, 2187],
['3', 2533, 2301, 833, 2347, 2170],
['4', 2530, 2300, 833, 2343, 2156],
['5', 2526, 2297, 837, 2339, 2147],
['6', 2519, 2294, 839, 2340, 2142],
['7', 2510, 2287, 838, 2356, 2146],
['8', 2506, 2276, 839, 2359, 2139],
['9', 2504, 2275, 840, 2346, 2127],
['10', 2500, 2274, 838, 2336, 2119],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '####'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
// Set chart options
var options = {
chart: {
title: 'LG HG2 Battery Performance Over Cycles',
},
hAxis: {
title: 'Cycle ID',
},
vAxis: {
title: 'Milliamp Hours',
},
'width':550,
'height':400,
lineWidth: 20,
};
// Instantiate and draw the chart.
var chart = new google.charts.Line(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Here's the Column Chart Code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// create and populate data table,
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Test', 'Average mAh', { role: 'style' }],
['Manufacturer Specification', 3000, '#804000' ],
['10A Continuous', 2249.970, '#804000' ],
['20A Continuous', 678.349, '#804000'],
['10A Pulsed', 2327.558, '#804000'],
['20A Pulsed', 2080.586, '#804000'],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '####'
});
formatter.format(data, 1);
// Set chart options
var options = {'title':'Tested Average mAh Ratings - LG HG2',
'width':800,
'height':600,
legend: {position: 'none'},
bar: {groupWidth: '90%'},
vAxis: { gridlines: { count: 8 }, minValue: 500}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Any help is greatly appreciated!
Material charts are in beta and you must use a converter function on your options to ensure they work properly. Here is an example:
chart.draw(data, google.charts.Line.convertOptions(options));
For your column chart, you must explicitly set the vaxis.title option like so:
vAxis: { title: 'Average mAh', gridlines: { count: 8 }, minValue: 500}
I'm creating a chart in Google Script and couldn't set the vAxis title either, and similarly couldn't modify some other attributes.
I found success by modifying vAxes[0] instead.
chart.setOption('vAxes', {0: {title: 'title Text'} } )
or if you're using an options variable:
vAxes: { 0: { title: 'Milliamp Hours' } }
Hope this helps anyone with the same issue.
I'm trying to use the chartArea.backgroundColor option of Google Charts, but it doesn't seem to work, although this option is clearly described in the doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options
JSfiddle
HTML :
<div id="piechart1" style="width: 900px; height: 500px;"></div>
JS :
google.load("visualization", "1", {packages:["corechart"]});
google.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',
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Any clue ?
Thanks a lot.
Referring to the official documentation
https://developers.google.com/chart/interactive/docs/gallery/piechart#exploding-a-slice
Use the slices attribute to change color of individual slice.
updated code from fiddle
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',
slices: {
0: {color:'red' },
1: {color:'blue' },
2: {color:'green'},
3: {color:'black'},
4: {color:'teal'}
},
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Try this:
chart.draw(data, google.charts.PieChart.convertOptions(options));
Is it possible to set dates as min/max values for google line charts?
Here is some sample code that demonstrates the problem:
<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([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {viewWindow: {min: new Date(2005,1,1)}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div"></div>
Maybe the problem is on the line:
hAxis: {viewWindow: {min: new Date(2005,1,1)}}
Your x-axis data are not Date objects, which is why setting the hAxis.viewWindow.min option to 'new Date(2005, 1, 1)` doesn't work. If you switch the domain column to a "date" type, it will work:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
[new Date(2004, 0, 1), 1000, 400],
[new Date(2005, 0, 1), 1170, 460],
[new Date(2006, 0, 1), 660, 1120],
[new Date(2007, 0, 1), 1030, 540]
]);
If your data is just years (and not related to any specific day of the year), then it might be best to use a "number" type column instead:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
[2004, 1000, 400],
[2005, 1170, 460],
[2006, 660, 1120],
[2007, 1030, 540]
]);
and set the hAxis.viewWindow.min option to a number:
hAxis: {viewWindow: {min: 2005}}
I am using the Following show the Column Chart for my records, i want to give spaces between the bars that are generating, please help.
<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([
['Date', '11-02-2013', '11-02-2013','11-02-2013','11-02-2013'],
['Weeks', 10,20,30,5],
]);
var options = {
title: 'Weekly Average Weight Loss Performance Chart For All Users',
is3D: true,
//isStacked: true,
isHtml: false,
// colors: ['d2ac2c', 'ff0000', '029748'],
bar: { groupWidth: '10%' },
legend:{position: 'bottom'},
//chbh:'0,10,0',
//hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
var options = {
bar: { groupWidth: '100%' },
The usual format for a column chart is that each series has its own column, grouped by rows. Since you have all 4 data points in the same row, you will end up having them all clumped together in the same group. If you change your data, you will get separation as each will be in a separate group:
var data = google.visualization.arrayToDataTable([
['Date', 'Data'],
['11-02-2013', 10],
['11-02-2013', 20],
['11-02-2013', 30],
['11-02-2013', 5]
]);
If you want to show multiple people, grouped by weeks, then you would do something like this:
var data = google.visualization.arrayToDataTable([
['Date', 'Alan', 'Beatrice', 'Charlie', 'Diana'],
['11-02-2013', 10, 5, 15, 20],
['11-02-2013', 20, 1, 2, 3],
['11-02-2013', 30, 25, 20, 15],
['11-02-2013', 5, 7, 9, 11]
]);
This will group your data by week (so all 4 people would be shown in the same week as a single group) with gaps between the weeks (between each 'group' of data).
I have a Pie Charts generated by Google Chart API. The code for the chart goes as Below
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1()
{
var data = google.visualization.arrayToDataTable([
['Location', 'Value'],
["Location A", 20 ],
["Location B", 32],
["Location C", 12],
["Location D", 20],
["Location E", 2],
["Location F", 20],
["Location H", 10]
]);
var options = {
colors : ['#00918c', '#d0c500','#945a94', '#84ac43', '#ea8c1c', '#006daf', '#c54d4d'],
is3D : 'false',
isHTML : 'false',
height : 200,
width : 285,
backgroundColor : "transparent",
chartArea : {left:0,top:0,width:"100%",height:"100%"},
legend : {position: 'right', alignment: "end"}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
The Link for the chart is as Below
Click to see Chart
I want to capture the event in the chart when they click any pie area.
Suppose if they click on Location A pie in pie chart I want a function that displays alert message as Location A Clicked and same for other pie's in chart.
Thanks for reply
I added the code below and its working fine now.
var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
function selectHandler()
{
var selectedItem = chart.getSelection()[0];
if (selectedItem)
{
var topping = data.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
See the link for Binding Events in google pie chart.
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
} </script>