<div class="box-header">
    <h2>
        <i class="icons-book-2"></i>
        <span class="break"></span>
        Traffic Loading
    </h2>
</div>
<div class="box-content">
<div id="month_traffic" style="min-width: 310px; height: 230px; margin: 0 auto"></div>
</div>
<script type="text/javascript">
$(function () {
    $.getJSON('/admin/dashboards/get_month_traffic', function (data) {
            // console.log(data);
            dates = [];
            visits = [];
            $.each(data,function(key,value){
                // console.log(value);
                $.each(value,function(date,visit){
                     dates.push(date);
                     visits.push(visit);
                });
            });
            
            $('#month_traffic').highcharts({
                chart: {
                    type: 'spline'
                },
                title: {
                    text: 'Monthly Traffic',
                    x: 0 //center
                },
                xAxis: {
                    categories: dates
                },
                yAxis: {
                    title: {
                        text: 'Number of visits'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Visits',
                    data: visits
                }]
            });
    });
});
</script>