Ali February 2016

highcharts on top of google map

I am displaying a highchart's polar chart on top of google map to to show the wind direction on the map. Please see this example http://jsfiddle.net/rishad/azarpssv/

<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
                },
                exporting: { 
                  enabled: false 
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    tickInterval: 45,
                    min: 0,
                    max: 360,
                    labels: {
                        formatter: function () {
                            return this.value + '°';
                        }
                    }
                },
                yAxis: {
                    min: 0
                },
                plotOptions: {
                    series: {
                        pointStart: 0,
                        pointInterval: 45
                    },
                    column: {
                        pointPadding: 0,
                        g        

Answers


Sebastian Bochan February 2016

The problem is caused by incorrect left parameter in the CSS styles. You should avoid to use harcoded value (because in table you have dynamic 100%). So the solution is using calc(50% - 175px) where 175px is half of chart width.

CSS:

#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left:calc(50% - 175px); z-index: 99; }

Example: - http://jsfiddle.net/sjmxke8g/

Post Status

Asked in February 2016
Viewed 1,780 times
Voted 5
Answered 1 times

Search




Leave an answer