Mother's Day Around The World

author(s): Mustapha Mekhatria

by mustapha mekhatria

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world-palestine-highres.js"></script>



<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

$(function() {
  Highcharts.data({
    googleSpreadsheetKey: '10VVKaX4k0yiLOhEN9Yu9hR0wHh1HzdmPmTtT4pvKKlg',
    parsed: function(columns) {

      // Read the columns into the data array
      var data = [];
      $.each(columns[0], function(i, code) {
        data.push({
          code: code.toUpperCase(),
          value: parseFloat(columns[2][i]),
          name: columns[1][i],
          date: columns[3][i],
        });
      });

      $('#container').highcharts('Map', {
        chart: {
          borderWidth: 0
        },

        title: {
          text: 'Mother\'s Day Around The World'
        },
        subtitle: {
          useHTML: true,
          text: 'Source <a href="https://en.wikipedia.org/wiki/Mother%27s_Day#Dates_around_the_world">Wikipedia</a>'
        },

        mapNavigation: {
          enabled: true
        },

        legend: {
          align: 'left',
          verticalAlign: 'bottom',
          floating: true,
          layout: 'vertical',
          valueDecimals: 0,
          symbolRadius: 0,
          symbolHeight: 14
        },

        colorAxis: {
          dataClasses: [

            {
              from: 0,
              to: 0,
              color: '#cfd8dc',
              name: 'No data',
            }, {
              from: 3,
              to: 3,
              color: '#b9f6ca',
              name: '8 March'
            }, {
              from: 4,
              to: 4,
              color: '#e5fcb3',
              name: '21 March'
            }, {
              from: 5,
              to: 5,
              color: '#fccab3',
              name: '1st Sunday of May'
            }, {
              from: 1,
              to: 1,
              color: '#fcecf1',
              name: '2nd Sunday of May',
            }, {
              from: 2,
              to: 2,
              color: '#fef9fb',
              name: 'Last Sunday of May'
            }, {
              from: 6,
              to: 6,
              color: '#ccedfd',
             ...