Highmaps Basic Rich Demo

A barebones demo. A demonstration of the potential that can be done in the future with the DPM.

by Daniel

HTML

<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/mapdata/countries/us/us-fl-all.js"></script>
<div id="wrapper">
    <div id="container"></div>
    <div id="info">
        	<h2 id='inner-title'></h2>

        <p><i id='inner-sub-title'></i>

        </p>
        <div id="inner-chart"></div>
    </div>
</div>

CSS

#wrapper {
    height: 500px;
    width: 1000px;
    margin: 0 auto;
    padding: 0;
}
#container {
    float: left;
    height: 500px;
    width: 700px;
    margin: 0;
}
#info {
    float: left;
    width: 270px;
    padding-left: 20px;
    margin: 100px 0 0 0;
    border-left: 1px solid silver;
}
#info h2 {
    display: inline;
}
#info .f32 .flag {
    vertical-align: bottom !important;
}
#info h4 {
    margin: 1em 0 0 0;
}

JavaScript

$(function () {
    
    // Global variables used to call their respective methods
    
    var innerChart;
    var map;


    // When invoked the inner chart will display 
    // You can modify this to be any chart or customize the chart's options.
    function innerChartCompareCallback(points) {

        var categories = [];
        var series = [];


        for (i = 0; i < points.length; i++) {
            categories[i] = points[i].name;
            series[i] = {
                name: points[i].name,
                data: points[i].value
            };
        }



        $('#inner-title').text('Comparing Counties (' + categories + ')');


        innerChart = $('#inner-chart').highcharts('Chart', {
            chart: {
                type: 'bar'
            },


            xAxis: {
                categories: [categories]

            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            }


        });

        var chart = $('#inner-chart').highcharts();

        $.each(series, function (index, item) {

            chart.addSeries({
 ...