Ep

Ep

How to create Chart on Google Maps - Google Visualization

Draw Pie charts clustering on Google Maps




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 :-


how to create pie chart,create charts,charts and graphs,pie charts, make graphs,pie chart of pie,make charts,  making a chart

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 );


Download Source Code Click here ..



How to create Chart on Google Maps - Google Visualization Reviewed by Ravi Kumar on 3:28:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.