"Week2: High Charts."

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Highcharts Extract Example</title>

.clearfix:before,
    .clearfix:after {
        content: ' ';
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }

</style>

</head>

<body>

<div class='aside-content'>
        <div id='total-mortality' class='chart show'></div>
        <div id='gdp-rate' class='chart hide'></div>
        <div class='btn-group clearfix'>
            <button id='racegap' class='btn autocompare'>Show GDP and Rate Mortality</button>
        </div>
        <p class='chart-notes'>These two charts show the child mortality in South America and its relation with the increase of the GDP in the region. Click on the country names to exclude countries in the analysis, so you can compare those that you prefer.</p>
        <p class='chart-notes'><b>Source:</b> Global Health Observatory (GHO), World Health Organization. World Bank.</p>
        <b>Data source:</b> <a href='https://www.who.int/gho/mortality_burden_disease/life_tables/situation_trends/en/'>GHO</a>. <a href="https://data.worldbank.org/">World Bank.</a></p>
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

// style theme
colors: ['#0096d2', '#00578b', '#fcb918', '#f47d20', '#6d6d6d', '#c6c6c6', 'rgba(0, 153, 255, 1)',
  '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
Highcharts.theme = {
chart: {
    backgroundColor: null,
    style: {
        fontFamily: 'Verdana, sans-serif'
    },
    marginTop: 0,
    marginBottom: 40
    },
    title: {
        style: {
            fontSize: '18px',
            fontWeight: 'bold',
            color: '#5a5a5a'
        },
        align: 'left'
    },
    subtitle: {
        align: 'left'
    },
    tooltip: {
        backgroundColor: 'rgba(229, 231, 234,0.9)',
        borderWidth: 0,
        borderColor: null,
        shape: 'square',
        followTouchMove: false,
        followPointer: false,
        style: {
            color: '#000000',
            fontWeight: 'normal'
        }
      },
    legend: {
        itemMarginBottom: 5,
        itemStyle: {
            fontSize: '13px',
            color: '#5a5a5a',
            fontWeight: 'normal'
        },
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    xAxis: {
        gridLineWidth: 1,
        gridLineDashStyle: 'Dash',
        gridLineColor: 'rgba(219,219,216,0.5)',
        labels: {
            style: {
                fontSize: '12px'
            }
        },
        tickmarkPlacement: 'on',
        tickInterval: 10
    },
    yAxis: {
        gridLineWidth: 1.2,
        gridLineDashStyle: 'Dash',
        minorTickInterval: 'none',
        gridLineColor: 'rgba(219,219,216,0.5)',

title: {

},
        labels: {
            style: {
                fontSize: '12px'
            }
        }
    },
}
// Apply the theme
Highcharts.setOptions(Highcharts.theme);

$(function() {

Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
    // 2 charts created

//chart5-mean
        $('#total-mortality').highcharts({
            chart: {
                type: 'line',
                marginTop: 120,
                marginBottom: 40

},
            plotOptions: {
              series: {
                  marker: {
                    enabled: true,
                    radius: 3.2,
                    lineWidth: 0.3,
                    symbol: 'circle',
                    fillColor: '#ffffff',
                    lineColor: null
                  },

dataLabels: {
                        enabled: false,
                        align: 'right',
                        x: 0,
                        y: -5,
                        formatter: function () {
                            if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) {
                                return Highcharts.numberFormat(this.x, 0, '.', ',');
                                Highcharts.numberFormat(this.y, 0, '.', ',')
                            } else {
                                return null;
                            }
                        }

}
                }
            },
            title: {
                text: 'Child mortality in South America, under 5 years old'
            },
            subtitle: {
                text: '',
                x: 0,
                y: 35
            },
            xAxis: {
                gridLineWidth: '',
                lineWidth: 0.5,
                tickInterval: 2,
                categories: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'],
                plotLines: [{
                    value: 0,
                    width: 0
                        }],
                labels: {
                    step: 0,
                    x: 0,
                    y: 20
                }

},
            yAxis: {
                title: {
                    text: ''
                },
                min: 0,
                startOnTick: false,
                labels: {
                    format: '{value:,.0f}'
                }
            },
            tooltip: {
                shared: false,
                formatter: function () {
                  return this.series.name + '<br>' +
                  '</b><b>' + Highcharts.numberFormat(this.point.y, 0, ',') + ' children died </b> in ' + this.x;
              }
                /*formatter: function () {
                  return '<span style="color:' + this.series.color + '"><b>' + this.series.name + '</b><br/>' + this.y + ' children died in ' + this.x ' k</span>';
              }*/

},
            credits: {
                enabled: false,
                text: '',
                href: ''
            },
            legend: {
                enabled: true,
                floating: 'true',
                align: 'center',
                verticalAlign: 'left',
                layout: 'horizontal',
                borderWidth: 0,
                itemDistance: 9,
                y: 40
            },
            series: [
                {
                    name: 'Argentina',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [6245, 6253, 5780, 5459, 5405, 5193, 5238, 5321, 5169, 5131, 4966, 4780]
                    },
                {
                    name: 'Bolivia',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [11716, 11249, 10704, 10074, 9433, 8735, 8137, 7615, 7193, 6930, 6758, 6641]
                    },
                {
                    name: 'Brazil',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [54832,49618,46313,41297,38213,33548,29617,26744,23996,22632,21916,21428]
                    },
                {
                    name: 'Chile',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [1315,1302,1266,1252,1163,1175,1129,1151,1118,1100,1066,1038]
                    },

{
                    name: 'Colombia',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [10425,10619,10981,10245,10238,10156,9576,9189,8943,8606,8255,7943]
                    },

{
                    name: 'Ecuador',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [5547,5312,5168,5042,4912,4754,4456,4322,4125,3983,3860,3787]
                        },

{
                    name: 'Paraguay',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [2737,2603,2546,2518,2454,2367,2270,2217,2163,2125,2104,2073]
                                },

{
                    name: 'Peru',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [11315,10543,9716,8983,8399,7788,7230,6735,6313,5868,5612,5286]
                },

{
                    name: 'Uruguay',
                    color: 'rgba(0, 153, 255, 1)',
                    data: [456,445,399,394,376,362,361,368,354,344,332,316]
                },

{
                     name: 'Venezuela',
                     color: 'rgba(0, 153, 255, 1)',
                     data: [6252,6319,6292,5979,5819,5736,5640,5513,5412,5312,5170,5033]
                 }

]

}); //end chart racial weawlth gap

// this one is hidden by default:

//chart5-median
        $(function () {
    $('#gdp-rate').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            marginTop: 120,
            marginBottom: 60
        },
        title: {
            text: 'GDP and child mortality in South America (2013)'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Under 5 mortality rate, per 1,000 live births'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
          labels: {
              format: '{value:,.0f}'
          },
            title: {
                text: 'GDP per capita'
            }
        },
        legend: {
          enabled: true,
          floating: 'true',
          align: 'center',
          verticalAlign: 'left',
          layout: 'horizontal',
          borderWidth: 0,
          itemDistance: 9,
          y: 40
        },
        credits: {
            enabled: false,
            text: '',
            href: 'https://www.neighborhoodinfodc.org'
        },
        plotOptions: {
            scatter: {
                marker: {
                    enabled: true,
                    radius: 6,
                    lineWidth: 2,
                    symbol: 'circle',
                    lineColor: null,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgba(100,100,100, 0.5)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="color:{series.color}">{series.name}</span><br>',
                    pointFormat: '{point.x} death children per 1,000 live births <br> GDP per capita: ${point.y}'
                }
            }
        },
        series: [{
            name: 'Argentina',
            color: 'rgba(0, 153, 255, 1)',
            data: [[13.3, 15009]]

}, {
            name: 'Bolivia',
            color: 'rgba(0, 153, 255, 1)',
            data: [[39.1, 2868]]
        },

{
            name: 'Brazil',
            color: 'rgba(0, 153, 255, 1)',
            data: [[13.7, 11939]]
        },
        	{
            name: 'Chile',
            color: 'rgba(0, 153, 255, 1)',
            data: [[8.2, 15703]]
        },
           {
            name: 'Colombia',
            color: 'rgba(0, 153, 255, 1)',
            data: [[16.9, 7865]]
        },

{
            name: 'Ecuador',
            color: 'rgba(0, 153, 255, 1)',
            data: [[22.5, 6003]]
        },

{
            name: 'Paraguay',
            color: 'rgba(0, 153, 255, 1)',
            data: [[21.9, 4248]]
        },

{
            name: 'Peru',
            color: 'rgba(0, 153, 255, 1)',
            data: [[16.7, 6662]]
        },

{
            name: 'Uruguay',
            color: 'rgba(0, 153, 255, 1)',
            data: [[11.1, 16884]]
        },

{
            name: 'Venezuela',
            color: 'rgba(0, 153, 255, 1)',
            data: [[14.9, 12213]]
        }

]
    });
});

//end chart racial weawlth gap

// Handle the toggle button with class setting:

document.getElementById('gdp-rate').className = 'chart hide';

$('#racegap').click(function () {

var racegap = document.getElementById('total-mortality');

if (racegap.className === 'chart show') {
                document.getElementById('total-mortality').className = 'chart hide';
                document.getElementById('gdp-rate').className = 'chart show';
                document.getElementById('racegap').innerHTML = 'Show yearly total mortality'
            } else {
                document.getElementById('racegap').innerHTML = 'Show GDP and Rate Mortality'
                document.getElementById('gdp-rate').className = 'chart hide';
                document.getElementById('total-mortality').className = 'chart show';
            }
        });
});

</script>

</html>

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

https://code.highcharts.com/highcharts.js