How to create Chart on Google Maps - Google Visualization
Draw Pie charts clustering on Google Maps
In my previous articles I have explained Circle Draw with a Radius Google Maps v3, Image Overlay On Google Maps, How to Show Google Map Multiple Markers Info Window in Java Script,ASP.net.
In this post I will explain how to Draw Pie Chart on Google Maps. Google Visualization API provides the feature to draw chart on Google Map with your customize data. Find the source code below :-
Default.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to
create Chart on Google Maps - Google Visualization</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script src="js/DrawPieChartAsMarkerGoogleMaps.js" type="text/javascript"></script>
</head>
<body onload="initialize();">
<form id="form1" runat="server">
<br />
<br />
<div id="map_canvas" style="width: auto; height: 600px;">
</div>
</form>
</body>
</html>
DrawPieChart.js
// Loading
Google Visualization API Reference
google.load( 'visualization',
'1', { packages:['corechart']
});
// Creating
chart as marker
function
ChartMarker( options ) {
this.setValues(
options );
this.$inner
= $('<div>').css({
position: 'relative',
left: '-50%',
top: '-50%',
width: options.width,
height: options.height,
fontSize: '1px',
lineHeight: '1px',
backgroundColor: 'transparent',
cursor: 'default'
});
this.$div
= $('<div>')
.append( this.$inner )
.css({
position: 'absolute',
display: 'none'
});
};
ChartMarker.prototype = new google.maps.OverlayView;
ChartMarker.prototype.onAdd = function() {
$( this.getPanes().overlayMouseTarget
).append( this.$div );
};
ChartMarker.prototype.onRemove = function() {
this.$div.remove();
};
ChartMarker.prototype.draw = function() {
var
marker = this;
var
projection = this.getProjection();
var
position = projection.fromLatLngToDivPixel( this.get('position') );
this.$div.css({
left: position.x,
top: position.y,
display: 'block'
})
this.$inner
.html( '<img
src="' + this.get('image') + '"/>' )
.click( function( event ) {
var
events = marker.get('events');
events &&
events.click( event );
});
this.chart
= new google.visualization.PieChart( this.$inner[0] );
this.chart.draw(
this.get('chartData'), this.get('chartOptions')
);
};
//
Initializing map with data for pie chart
function
initialize() {
var
latLng = new
google.maps.LatLng(19.102351,72.873473);
var
map = new google.maps.Map( $('#map_canvas')[0], {
zoom: 11,
center: latLng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
});
var
data = google.visualization.arrayToDataTable([
[ 'Task',
'Hours per Day' ],
[ 'Work',
11 ],
[ 'Eat',
2 ],
[ 'Commute',
2 ],
[ 'Watch
TV', 2 ],
[ 'Sleep',
7 ]
]);
var
options = {
fontSize: 11,
backgroundColor: 'transparent',
legend: 'none'
};
// var options =
{'is3D':true,
// 'width':340,
// 'height':300,
// 'chartArea': {'width':
'70%', 'height': '60%','top':0},
// legend: {textStyle: {color:
'gray'}},
//
pieSliceText:'percentage',
// colors: ['#00529c',
'#2274bd', '#3688d1', '#4c9ce4', '#62b0f7', '#b1daff']};
// if ($.browser.msie)
{options['backgroundColor'] = {fill: 'transparent'};}
// else
{options['backgroundColor'] = {fill: 'transparent'}
var marker = new ChartMarker({
map: map,
position: latLng,
width: '100px',
height: '100px',
chartData: data,
chartOptions: options,
events: {
click: function( event ) {
alert( 'Latitude: ' + marker.position.hb + 'and Longitude: ' + marker.position.ib ); //Clicked marker lat lng
}
}
});
};
$( initialize );
How to create Chart on Google Maps - Google Visualization
Reviewed by Ravi Kumar
on
3:28 PM
Rating:
Reviewed by Ravi Kumar
on
3:28 PM
Rating:
No comments: