Chart With Labels

FORMAT : 1

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        chart: {
            type: 'line'
        },
        title: {
            text: 'TITLE: Monthly Average Temperature'
        },
        subtitle: {
            text: 'SUB TITLE'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (C)'
            }
        },
        tooltip: {
            enabled: false,
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +'C';
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            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]
            }]
        }"
));
?>    

FORMAT : 2

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>array(
        'chart'=>array(
            'type'=> 'line'
        ),
        'title'=>array(
            'text'=> 'TITLE: Monthly Average Temperature'
        ),
        'subtitle'=>array(
            'text'=> 'SUB TITLE'
        ),
        'xAxis'=>array(
            'categories'=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
        ),
        'yAxis'=>array(
            'title'=>array(
                'text'=> 'Temperature (C)'
            )
        ),
        'plotOptions'=>array(
            'line'=>array(
                'dataLabels'=>array(
                    'enabled'=> true
                ),
                'enableMouseTracking'=> false
            )
        ),
        'series'=>array(
            array( 
            'name'=> 'Tokyo',
            'data'=> array(7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)
            ), array(
            'name'=> 'London',
            'data'=>array(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8)
            )
        )
    )
));
?>
<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        chart: {
            type: 'line'
        },
        title: {
            text: 'TITLE: Monthly Average Temperature'
        },
        subtitle: {
            text: 'SUB TITLE'
        },
        xAxis: {
            gridLineWidth: 1,
            lineColor: '#000',
            tickColor: '#000',
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            minorTickInterval: 'auto',
            lineColor: '#000',
            lineWidth: 1,
            tickWidth: 1,
            tickColor: '#000',
            title: {
                text: 'Temperature (C)'
            }
        },
        tooltip: {
            enabled: false,
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'C';
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            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]
            }]
        }"
));
?> 
<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        colors: ['#DDDF0D', '#7798BF', '#55BF3B'],
        chart: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, 'rgb(96, 96, 96)'],
                    [1, 'rgb(16, 16, 16)']
                ]
            },
            borderWidth: 0,
            borderRadius: 15,
            plotBackgroundColor: null,
            plotShadow: false,
            plotBorderWidth: 0
        },      
        title: {
            style: {
                color: '#FFF',
            },                
            text: 'TITLE: Monthly Average Temperature'
        },
        subtitle: {
            style: {
                color: '#FF0000',
            },
            text: 'SUB TITLE'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (C)'
            }
        },
        tooltip: {
            enabled: false,
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'C';
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
         
         series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            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]
            }]
         }"
));
?>