All geek questions in one place

Pie chart on google map

I want to draw pie charts in several places on a Google map. Is there a way to draw a Google pie chart in a specific location on a Google map to represent a dataset (e.g. population in a specific location / city)?

I came up with a solution and below displays the code I wrote to display the pie chart icon in a specific place. I have one more requirement to add an event listener to the pi diagram icon in order to display a window with a more detailed pie chart. I came up with the code below as a solution for these requirements, but it does not display a window when the icon is clicked. Could you help me find the problem here?

<html> <head> <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css"> <script 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.1.min.js"></script> <script type="text/javascript"> google.load( 'visualization', '1', { packages:['corechart'] }); function drawChart(marker, data) { var options = {'title':'Perception Analysis '+ marker.getPosition().toString(), 'width':400, 'height':150}; var node = document.createElement('div'), infoWindow = new google.maps.InfoWindow(), chart = new google.visualization.PieChart(node); chart.draw(data, options); infoWindow.setContent(node); infoWindow.open(marker.getMap(),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', padding: '2px', 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') ); }; function initialize() { var latLng = new google.maps.LatLng( 40.708762, -74.006731 ); var mapOptions = { center: latLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var data = google.visualization.arrayToDataTable([ [ 'Task', 'Hours per Day' ], [ 'Work', 11 ], [ 'Eat', 2 ], [ 'Commute', 2 ], [ 'Watch TV', 2 ], [ 'Sleep', 7 ] ]); var options = { fontSize: 8, backgroundColor: 'transparent', legend: {position: 'none'} }; var marker = new ChartMarker({ map: map, position: latLng, width: '250px', height: '100px', chartData: data, chartOptions: options, events: { click: function( event ) { drawChart(this,data) } } }); }; </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 900px; height: 500px;"></div> </body> </html>
+6
source share
2 answers

If you are talking about a pie chart drawn using the visualization API , you can use a custom HTML overlay similar to the one found in this fiddle :

 google.load( 'visualization', '1', { packages:['corechart'] }); 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', border: '1px solid #888', padding: '2px', backgroundColor: 'white', 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') ); }; function initialize() { var latLng = new google.maps.LatLng( 40.708762, -74.006731 ); var map = new google.maps.Map( $('#map_canvas')[0], { zoom: 15, 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 = { title: 'My Daily Activities', fontSize: 8 }; var marker = new ChartMarker({ map: map, position: latLng, width: '250px', height: '100px', chartData: data, chartOptions: options, events: { click: function( event ) { alert( 'Clicked marker' ); } } }); }; $( initialize );
+5
source

I recently had to implement pie charts as markers for many locations on a map. The presence of many places in the map application also required clustering of markers ... In my particular case, displaying a pie chart as an overlay is not suitable, so I built a simple library. Maybe to say that this is too large a library, because at the moment it is only one function that generates pie-w980> svg node. Github repository with an example of how to use the function with Google maps below
Repository

0
source

Source: https://habr.com/ru/post/948838/

More articles:


All Articles