$(function() {
    $(document).ready(function() {
        $.getJSON('howrwe.json', function(chartvalues) {
            var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            tooltip: {
                formatter: function() {
                   var that = this.points;
                    that = that.reverse(); //reverse the order as per the legend
                    var s = '<b>' + this.x + '</b>';
                    var total = 0;
                    $.each(that, function(i, point) {
                        s += '<br/>' + point.series.name + ': ' + point.y;
                        total += point.y;
                    });
                    s += '<br/>' + chartvalues.totalText + ': ' + total;
                    return s;
                },
                shared: true
            },
            title: {
                text: chartvalues.title,
                style: {
                    fontSize: '16px',
                    fontFamily: 'arial, sans-serif',
                    color: chartvalues.chartColor
                }
            },
            subtitle: {
                text: chartvalues.subtitle,
                style: {
                    fontSize: '13px',
                    fontFamily: 'arial, sans-serif',
                    color: chartvalues.chartColor
                }
            },
            credits: {
                enabled: false
            },
            legend: {
                reversed: true,
                itemStyle: {
                    fontSize: '13px',
                    fontFamily: 'arial, sans-serif',
                    color: chartvalues.chartColor
                },
                verticalAlign: 'top',
                y: 50
            },
            xAxis: {
                categories: chartvalues.categories,
                labels: {
                    formatter: function() {
                        var returnDay = new Date(this.value);
                        var weekDay = returnDay.getUTCDay();
                        var day = returnDay.getUTCDate();
                        var mon = returnDay.getUTCMonth() + 1;
                        return chartvalues.weekdays[weekDay] + ' ' + day + '/' + mon;
                    },
                    style: {
                        fontSize: '12px',
                        fontFamily: 'arial, sans-serif',
                        color: chartvalues.chartColor
                    }
                }
            },
            yAxis: {
                title: '',
                min: 0,
                max: 12,
                tickInterval: 1,
                labels: {
                    style: {
                        fontSize: '12px',
                        fontFamily: 'arial, sans-serif',
                        color: chartvalues.chartColor
                    }
                }
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
           },
            series: chartvalues.series
        });
     });
    });
});