Advertiser dashboard chart #1

by Angelos Chaidas

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="border:1px solid #CCC; width: 680px; height: 280px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            style : {
                fontFamily : 'Arial',
                fontSize : '14px'
            }
        },
        title: {
            text: ''
        },
        /*
            subtitle: {
                text: 'Source: WorldClimate.com'
            },*/
        xAxis: [{
            categories: [
                '01/3',
                '02/3',
                '03/3',
                '04/3',
                '05/3',
                '06/3',
                '07/3',
                '08/3']
        }],
        yAxis: [{
            min: 0,
            title: {
                text: 'Number of clicks',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                /*formatter: function() {
                        return this.value +' mm';
                    },*/
                style: {
                    color: '#4572A7'
                }
            }

        }, {
            //gridLineWidth: 0,
            gridLineColor : '#EFEFEF',
            min: 0,
            title: {
                text: 'Cost',
                style: {
                    color: '#AA4643'
                }
            },
            labels: {
                formatter: function () {
                    return '$' + this.value;
                },
                style: {
                    color: '#AA4643'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            x: -120,
            verticalAlign: 'top',
            y: 30,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Clicks',
            //color: '#AA4643',
            data: [
            88, 100, 123, 140, 114, 78, 60, 50],
           ...