Advertiser dashboard: Clusters

by Angelos Chaidas

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<div id="container_2"></div>
<div id="container_3"></div>

CSS

#container,
#container_2,
#container_3 {
    border:1px solid #EFEFEF;
    width:276px;
    height:276px;
    margin-top:20px;
}

JavaScript

$(function () {
    var chart;

    $(document).ready(function () {
        // Ad freshness
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                //plotBorderWidth: null,
                plotShadow: true,
                spacingTop : 0
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Ad freshness'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    minSize : 200,
                    dataLabels: {
                        borderRadius : 3,
                        backgroundColor : 'rgba(255,255,255,0.6)',
                        borderWidth : 1,
                        borderColor: '#CCC',
                        enabled: true,
                        distance : -10,
                        style : {
                            color : 'black'
                        }
                    },
                    // showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                data: [
                    {
                        name : '<strong>Last 24 hours</strong><br/>26%',
                        y : 26,
                        color : '#CC0000'
                    },
                    {
                        name : '<strong>Last 3 days</strong><br/>18%',
                        y : 18,
                        color : '#FFCC00'
                    },
                    {
                        name : '<strong>Last 7 days</strong><br/>20%',
                        y : 20,
                        color : '#0660c5'
                    },
                    {
                        name: '<strong>Not specified</strong><br/>36%',
      ...