Data classes and popup

author(s): Torstein Hønsi

by prateekbansal07

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css" />

<div id="container">
    <div class="loading">
        <i class="icon-spinner icon-spin icon-large"></i>
        Loading data from Google Spreadsheets...
    </div>
</div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 600px;
    margin: 0 auto;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

(async () => {

    const mapData = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/us-all.topo.json'
    ).then(response => response.json());

    // Load the data from a Google Spreadsheet
    // https://docs.google.com/spreadsheets/d/1uj1Gzv3fpH-b0w2tYpuKNp3TrGr43I9XAAqmgVE_jMs
    Highcharts.data({
        googleAPIKey: 'AIzaSyCQ0Jh8OFRShXam8adBbBcctlbeeA-qJOk',
        googleSpreadsheetKey: '1tp9hUZurjBQF_oFFAR8WKzxFL538K4ev5yElL3cUpgM',

        // Custom handler for columns
        parsed: function (columns) {
debugger;
            /**
             * Event handler for clicking points. Use jQuery UI to pop up
             * a pie chart showing the details for each state.
             */
            function pointClick() {
                var row = this.options.row,
                    $div = $('<div></div>')
                        .dialog({
                            title: this.name,
                            width: 320,
                            height: 300
                        });

                window.chart = new Highcharts.Chart({
                    chart: {
                        renderTo: $div[0],
                        type: 'pie',
                        width: 290,
                        height: 240
                    },
                    title: {
                        text: null
                    },
                    series: [{
                        name: 'Votes',
                        data: [{
                            name: 'Molina',
                            color: '#C40401',
                            y: parseInt(columns[2][row], 10)
                        }, {
                            name: 'Overlap',
                            color: '#0200D0',
                            y: parseInt(columns[3][row], 10)
                        },{
                            name: 'Others',
                            color: '#0200D0',
                            y: parseInt(columns[4][row], 10)
...