Create polar chart on top of map
I want to plot a polar chart on top of a map to show the air pollution concentration and the wind direction on the map. I prefer it to be Google map but any satellite map will do. Is it possible ?
![](https://secure.gravatar.com/avatar/84f0ffb53e551eeb4b20a5e5b04d2590?size=40&default=https%3A%2F%2Fassets.uvcdn.com%2Fpkg%2Fadmin%2Ficons%2Fuser_70-6bcf9e08938533adb9bac95c3e487cb2a6d4a32f890ca6fdc82e3072e0ea0368.png)
Yes, basically you just need to place a div on top of the Google map, then add the chart to the div.
-
Rishad Ali commented
Thank you for the response.
I have already tried that, Please see theexample belowI was expecting something like map-bubble chart within the highchart api.
Thank you anyway.<html>
<head>
<title>Simple Polar chart on Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left: 75px; z-index: 99; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
title: {
text: ''
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
min: 0
},
legend: {
enabled: true
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'First',
data: [8, 7, 6, 5, 4, 3, 2, 3],
pointPlacement: 'between'
}, {
type: 'area',
name: 'Second',
data: [5, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'line',
name: 'Third',
data: [3, 8, 2, 7, 3, 6, 4, 5]
}, {
type: 'line',
name: 'Forth',
data: [9, 6, 5, 10, 5, 2, 9, 2]
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<div id="wrapper">
<div id="map" style="width: 500px; height: 500px;"></div>
<div id="over_map">
<div id="container" style="width: 350px; height: 350px;"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.2446488, lng: -2.4800022},
zoom: 16,
maxZoom:18,
draggable:false,
scrollwheel:false
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html> -
Rishad Ali commented
http://www.highcharts.com/maps/demo/map-bubble
In the demo I can see bubble charts on the map.
Will it be possible to add polar chart centred at the sensor location?