‘Highmaps/Highcharts’ change width, height and positioning on page refresh

I am using ‘highmaps’ in my project on angularjs. The map plots just fine the first time page is rendered (as per the width, height and positioning on the page as I want). But when I route to another page and then back again from the links on the sidebar, the size and positioning are completely different and the alighnment is all messed up.

The wanted alignment is Wanted Alignment

The unwanted alignment is Unwanted Alignment

Following is my dashboard.html’

<!-- <div id="container"></div> -->
<!-- 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script> -->

<style>
        .icon {
                padding: 10px;
        }

        .loader {
                position: fixed;
                top: 50%;
                left: 50%;
                border: 5px solid #f3f3f3;
                border-radius: 50%;
                border-top: 5px solid #3498db;
                width: 80px;
                height: 80px;
                -webkit-animation: spin 2s linear infinite;
                animation: spin 2s linear infinite;
        }

        @-webkit-keyframes spin {
                0% {
                        -webkit-transform: rotate(0deg);
                }
                100% {
                        -webkit-transform: rotate(360deg);
                }
        }

        @keyframes spin {
                0% {
                        transform: rotate(0deg);
                }
                100% {
                        transform: rotate(360deg);
                }
        }

        #mapDiv {
                position: relative;
                /* padding-left: 10px;
                padding-top: 7px; */
        }

        #radioGroup {
                position: absolute;
                bottom: 100px;
                left: 20px
        }

        #radioBtn {
                padding-left: 19px;
        }

        label {
                font-size: 15px;
        }

        .form-group {
                padding-top: 10px;
                width: 20%
        }

        #regions_div {
                /* margin-top: -8px; */
                border-bottom: 1px solid white;
        }

        #mapRow {
                overflow: hidden;
                border-top: 1px solid white;
        }
</style>
<div class="container-fluid">
        <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="loader" ng-show="load_true"></div>
                        <div class="row" ng-hide="load_true">
                                <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                <div class="info-box">
                                                        <div class="icon bg-red">
                                                                <img src="resourcesimagesiconspartners.png" width="60" height="60" />
                                                                <!-- <i class="material-icons">shopping_cart</i> -->
                                                        </div>
                                                        <div class="content">
                                                                <div class="text">Partners</div>
                                                                <div class="number count-to" data-from="0" data-to="125" data-speed="5000" data-fresh-interval="20">{{partners}}</div>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                <div class="info-box">
                                                        <div class="icon bg-blue">
                                                                <img src="resourcesimagesiconsstate.png" width="60" height="60" />
                                                                <!-- <i class="material-icons">shopping_cart</i> -->
                                                        </div>
                                                        <div class="content">
                                                                <div class="text">States</div>
                                                                <div class="number count-to" data-from="0" data-to="125" data-speed="5000" data-fresh-interval="20">{{state}}</div>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                <div class="info-box">
                                                        <div class="icon bg-green">
                                                                <img src="resourcesimagesiconshome.png" width="60" height="60" />
                                                                <!-- <i class="material-icons">shopping_cart</i> -->
                                                        </div>
                                                        <div class="content">
                                                                <div class="text">Districts</div>
                                                                <div class="number count-to" data-from="0" data-to="125" data-speed="10000" data-fresh-interval="20">{{district}}</div>
                                                        </div>
                                                </div>
                                        </div>
                                        <!-- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                <div class="info-box">
                                                        <div class="icon bg-yellow">
                                                                <img src="resourcesimagesiconsblock.png" width="60" height="60" />
                                                                 <i class="material-icons">shopping_cart</i>
                                                        </div>
                                                        <div class="content">
                                                                <div class="text">Blocks</div>
                                                                <div class="number count-to" data-from="0" data-to="125" data-speed="10000" data-fresh-interval="20">{{block}}</div>
                                                        </div>
                                                </div>
                                        </div> -->
                                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                <div class="info-box">
                                                        <div class="icon bg-yellow">
                                                                <img src="resourcesimagesiconsvillage.png" width="60" height="60" />
                                                                <!-- <i class="material-        icons">shopping_cart</i> -->
                                                        </div>
                                                        <div class="content">
                                                                <div class="text">Villages Reached</div>
                                                                <div class="number count-to" data-from="0" data-to="125" data-speed="10000" data-fresh-interval="20">{{village}}</div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                                <div class="row" id="mapRow">
                                        <!-- <div class="card"> -->
                                                <!-- <div id="mapDiv"> -->
                                                        <div id="regions_div"></div>
                                                <!-- </div> -->
                                        <!-- </div> -->
                                        <div class="form-group card" id="radioGroup">
                                                <div id="radioBtn">
                                                        <input type="radio" name="gender" id="male" class="with-gap" ng-model="radioBtn" value='overall' ng-click="overallCalled()"
                                                                ng-checked="true">
                                                        <label for="male">Program Coverage</label>
                                                </div>
                                                <div>
                                                        <input type="radio" name="gender" id="female" class="with-gap" ng-model="radioBtn" value='saathi' ng-click="saathiCalled()">
                                                        <label for="female" class="m-l-20">Saathis Involved</label>
                                                </div>
                                                <div>
                                                        <input type="radio" name="gender" id="nothing" class="with-gap" ng-model="radioBtn" value='beneficiary' ng-click="beneficiaryCalled()">
                                                        <label for="nothing" class="m-l-20">Individuals Trained</label>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

Following is my ‘dashboardController.js’

app.controller('dashboardController', function ($scope, $http, $location, APPCONFIG) {
    var saathiArr = [['Region', 'Saathi Count']];
    var benArr = [['Region', 'Individual Count']];

    document.getElementById('regions_div').style.pointerEvents = 'none';
    console.log('reload');
    $scope.load_true = true;
    var mapData = {
        'S28': 'IN-AP',
        'S09': 'IN-UP',
        'S27': 'IN-MH',
        'S08': 'IN-RJ',
        'S19': 'IN-WB',
        'S20': 'IN-JH',
        'S18': 'IN-AS',
        'S10': 'IN-BR',
        'S23': 'IN-MP',
        'S24': 'IN-GJ',
        'S16': 'IN-TR'
    }
    var data = [
        ['Region', 'States Covered'],
        ['IN-AS', 10],
        ['IN-BR', 20],
        ['IN-AP', 30], //
        ['IN-GJ', 40], //
        ['IN-JH', 50], //
        ['IN-MP', 60], //
        ['IN-MH', 70], //
        ['IN-RJ', 80], //
        ['IN-TR', 90],
        ['IN-UP', 100], //
        ['IN-WB', 110] //
    ];

    $scope.overallCalled = function () {
        // alert('overall');
        document.getElementById('regions_div').style.pointerEvents = 'none';
        data = [
            ['Region', 'States Covered'],
            ['IN-AS', 10],
            ['IN-BR', 20],
            ['IN-AP', 30],
            ['IN-GJ', 40],
            ['IN-JH', 50],
            ['IN-MP', 60],
            ['IN-MH', 70],
            ['IN-RJ', 80],
            ['IN-TR', 90],
            ['IN-UP', 100],
            ['IN-WB', 110]
        ];
        google.charts.setOnLoadCallback(drawRegionsMap);
    }

    $scope.saathiCalled = function () {
        // alert('saathi');
        // data = [
        //  ['Region', 'Saathi Count'],
        //  ['IN-JK', 600],
        //  ['IN-UP', 300],
        //  ['IN-AP', 250],
        //  ['IN-GA', 50],
        //  ['IN-TN', 150],
        //  ['IN-PB', 200]
        // ];
        document.getElementById('regions_div').style.pointerEvents = '';

        data = saathiArr;
        google.charts.setOnLoadCallback(drawRegionsMap);
    }

    $scope.beneficiaryCalled = function () {
        // alert('beneficiary');
        // var data = [
        //  ['Region', 'Saathi Count'],
        //  ['IN-HP', 600],
        //  ['IN-UP', 300],
        //  ['IN-AP', 250],
        //  ['IN-GA', 50],
        //  ['IN-TN', 150],
        //  ['IN-PB', 200]
        // ];
        document.getElementById('regions_div').style.pointerEvents = '';

        data = benArr;
        google.charts.setOnLoadCallback(drawRegionsMap);
    }


    $scope.villages = "";
    $scope.block = "";
    $scope.district = "";
    $scope.state = "";
    $scope.partner_name = "";

    $http({
        "url": APPCONFIG.apiBaseUrl + "dashboard/count/saathilocation",
        "method": "GET"
    }).then(function onSuccess(response) {
        // setTimeout(function () {
        //  $scope.load_true = false;
        // }, 1000);
        $scope.load_true = false;

        var data = response.data.data;
        $scope.village = data.villages;
        $scope.block = data.block;
        $scope.district = data.district;
        $scope.state = data.state;
        $scope.partners = data.partner_name;
    }, function onError(response) {
        console.log(response);
    });

    var prms1 = new Promise(function (resolve, reject) {
        // var saathiArr = [['Region', 'Saathi Count']];
        $http({
            "url": APPCONFIG.apiBaseUrl + "/dashboard/count/saathistatewise",
            "method": "GET"
        }).then(function onSuccess(response) {
            response.data.data.forEach(function (element) {
                saathiArr.push([mapData[element.code], element.count]);
            });
            console.log("saathiArr", saathiArr);

            resolve(saathiArr);

        }, function onError(response) {
            console.log(response);
            reject(response);
        });
    });
    var prms2 = new Promise(function (resolve, reject) {
        $http({
            "url": APPCONFIG.apiBaseUrl + "/dashboard/count/benstatewise",
            "method": "GET"
        }).then(function onSuccess(response) {
            // var benArr = [['Region', 'Saathi Count']];
            // response.data.data.forEach(function(element) {
            response.data.data.forEach(function (element) {
                benArr.push([mapData[element.code], element.count]);
            });
            console.log("benArr", benArr);
            resolve(benArr);
        }, function onError(response) {
            console.log(response);
            reject(response);
        });
    });
    Promise.all([prms1, prms2]).then(function (collection) {
        $scope.load_true = false;
        console.log('collection is ', collection);
    }).catch(function (err) {
        console.log("Err Catch", err)
    });




    google.charts.load('current', {
        'packages': ['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyDJvysCzncAjSo4qPqG0M02NqB8ZXl2VM4'
    });
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {

        var p_data = google.visualization.arrayToDataTable(data);


        var options = {
            region: 'IN',
            displayMode: 'region',
            resolution: 'provinces',
            colorAxis: { colors: ['#FFCA00', '#FF342B'] },
            backgroundColor: '#9BD9E7',
            defaultColor: '#000000',
            datalessRegionColor: '#EAEAEA',
            keepAspectRatio: true,
            // height: '740',
            // height: '100%',
            // width: '1000'
            // height: '584'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        // alert('hi !');

        chart.draw(p_data, options);

    }

});

I have tried to add ‘height’ and ‘width’ in the ‘options’ array of the highmaps, however, the problem still persists.
Any help is appreciated.
Thank You.

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.