jQuery(document).ready(function() {

  // HIGHCHARTS DEMOS



  	// LINE CHART 1

	$('#highchart_1').highcharts({

        chart : {

            style: {

                fontFamily: 'Open Sans'

            }

        },

		title: {

			text: 'Monthly Average Temperature',

			x: -20 //center

		},

		subtitle: {

			text: 'Source: WorldClimate.com',

			x: -20

		},

		xAxis: {

			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

		},

		yAxis: {

			title: {

				text: 'Temperature (°C)'

			},

			plotLines: [{

				value: 0,

				width: 1,

				color: '#808080'

			}]

		},

		tooltip: {

			valueSuffix: '°C'

		},

		legend: {

			layout: 'vertical',

			align: 'right',

			verticalAlign: 'middle',

			borderWidth: 0

		},

		series: [{

			name: 'Tokyo',

			data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

		}, {

			name: 'New York',

			data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

		}, {

			name: 'Berlin',

			data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

		}, {

			name: 'London',

			data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

		}]

	});



	// LINE CHART 2

	$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {



        $('#highchart_2').highcharts({

            chart: {

                zoomType: 'x',

                style: {

                    fontFamily: 'Open Sans'

                }

            },

            title: {

                text: 'USD to EUR exchange rate over time'

            },

            subtitle: {

                text: document.ontouchstart === undefined ?

                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'

            },

            xAxis: {

                type: 'datetime'

            },

            yAxis: {

                title: {

                    text: 'Exchange rate'

                }

            },

            legend: {

                enabled: false

            },

            plotOptions: {

                area: {

                    fillColor: {

                        linearGradient: {

                            x1: 0,

                            y1: 0,

                            x2: 0,

                            y2: 1

                        },

                        stops: [

                            [0, Highcharts.getOptions().colors[0]],

                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]

                        ]

                    },

                    marker: {

                        radius: 2

                    },

                    lineWidth: 1,

                    states: {

                        hover: {

                            lineWidth: 1

                        }

                    },

                    threshold: null

                }

            },



            series: [{

                type: 'area',

                name: 'USD to EUR',

                data: data

            }]

        });

    });



	// AREA CHART

	$('#highchart_3').highcharts({

        chart: {

            type: 'area',

            style: {

                fontFamily: 'Open Sans'

            }

        },

        title: {

            text: 'Historic and Estimated Worldwide Population Growth by Region'

        },

        subtitle: {

            text: 'Source: Wikipedia.org'

        },

        xAxis: {

            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],

            tickmarkPlacement: 'on',

            title: {

                enabled: false

            }

        },

        yAxis: {

            title: {

                text: 'Billions'

            },

            labels: {

                formatter: function () {

                    return this.value / 1000;

                }

            }

        },

        tooltip: {

            shared: true,

            valueSuffix: ' millions'

        },

        plotOptions: {

            area: {

                stacking: 'normal',

                lineColor: '#666666',

                lineWidth: 1,

                marker: {

                    lineWidth: 1,

                    lineColor: '#666666'

                }

            }

        },

        series: [{

            name: 'Asia',

            data: [502, 635, 809, 947, 1402, 3634, 5268]

        }, {

            name: 'Africa',

            data: [106, 107, 111, 133, 221, 767, 1766]

        }, {

            name: 'Europe',

            data: [163, 203, 276, 408, 547, 729, 628]

        }, {

            name: 'America',

            data: [18, 31, 54, 156, 339, 818, 1201]

        }, {

            name: 'Oceania',

            data: [2, 2, 2, 6, 13, 30, 46]

        }]

    });

 

 	// BAR CHART

 	// Age categories

    var categories = ['0-4', '5-9', '10-14', '15-19',

            '20-24', '25-29', '30-34', '35-39', '40-44',

            '45-49', '50-54', '55-59', '60-64', '65-69',

            '70-74', '75-79', '80-84', '85-89', '90-94',

            '95-99', '100 + '];

   

    $('#highchart_4').highcharts({

        chart: {

            type: 'bar',

            style: {

                fontFamily: 'Open Sans'

            }

        },

        title: {

            text: 'Population pyramid for Germany, 2015'

        },

        subtitle: {

            text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'

        },

        xAxis: [{

            categories: categories,

            reversed: false,

            labels: {

                step: 1

            }

        }, { // mirror axis on right side

            opposite: true,

            reversed: false,

            categories: categories,

            linkedTo: 0,

            labels: {

                step: 1

            }

        }],

        yAxis: {

            title: {

                text: null

            },

            labels: {

                formatter: function () {

                    return Math.abs(this.value) + '%';

                }

            }

        },



        plotOptions: {

            series: {

                stacking: 'normal'

            }

        },



        tooltip: {

            formatter: function () {

                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +

                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);

            }

        },



        series: [{

            name: 'Male',

            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,

                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,

                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]

        }, {

            name: 'Female',

            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,

                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,

                1.8, 1.2, 0.6, 0.1, 0.0]

        }]

    });



	// DONUT CHART

	var colors = Highcharts.getOptions().colors,

        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],

        data = [{

            y: 56.33,

            color: colors[0],

            drilldown: {

                name: 'MSIE versions',

                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],

                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],

                color: colors[0]

            }

        }, {

            y: 10.38,

            color: colors[1],

            drilldown: {

                name: 'Firefox versions',

                categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],

                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],

                color: colors[1]

            }

        }, {

            y: 24.03,

            color: colors[2],

            drilldown: {

                name: 'Chrome versions',

                categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',

                    'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'

                    ],

                data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],

                color: colors[2]

            }

        }, {

            y: 4.77,

            color: colors[3],

            drilldown: {

                name: 'Safari versions',

                categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],

                data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],

                color: colors[3]

            }

        }, {

            y: 0.91,

            color: colors[4],

            drilldown: {

                name: 'Opera versions',

                categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],

                data: [0.34, 0.17, 0.24, 0.16],

                color: colors[4]

            }

        }, {

            y: 0.2,

            color: colors[5],

            drilldown: {

                name: 'Proprietary or Undetectable',

                categories: [],

                data: [],

                color: colors[5]

            }

        }],

        browserData = [],

        versionsData = [],

        i,

        j,

        dataLen = data.length,

        drillDataLen,

        brightness;





    // Build the data arrays

    for (i = 0; i < dataLen; i += 1) {



        // add browser data

        browserData.push({

            name: categories[i],

            y: data[i].y,

            color: data[i].color

        });



        // add version data

        drillDataLen = data[i].drilldown.data.length;

        for (j = 0; j < drillDataLen; j += 1) {

            brightness = 0.2 - (j / drillDataLen) / 5;

            versionsData.push({

                name: data[i].drilldown.categories[j],

                y: data[i].drilldown.data[j],

                color: Highcharts.Color(data[i].color).brighten(brightness).get()

            });

        }

    }



    // Create the chart

    $('#highchart_5').highcharts({

        chart: {

            type: 'pie',

            style: {

                fontFamily: 'Open Sans'

            }

        },

        title: {

            text: 'Browser market share, January, 2015 to May, 2015'

        },

        subtitle: {

            text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'

        },

        yAxis: {

            title: {

                text: 'Total percent market share'

            }

        },

        plotOptions: {

            pie: {

                shadow: false,

                center: ['50%', '50%']

            }

        },

        tooltip: {

            valueSuffix: '%'

        },

        series: [{

            name: 'Browsers',

            data: browserData,

            size: '60%',

            dataLabels: {

                formatter: function () {

                    return this.y > 5 ? this.point.name : null;

                },

                color: '#ffffff',

                distance: -30

            }

        }, {

            name: 'Versions',

            data: versionsData,

            size: '80%',

            innerSize: '60%',

            dataLabels: {

                formatter: function () {

                    // display only if larger than 1

                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;

                }

            }

        }]

    });







});

