Basic Charts

FORMAT: 1

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>array(
        'title'=> array(
            'text'=> 'TITLE: Monthly Average Temperature',
            'x'=> -20 //center
        ),
        'subtitle'=>array(
            'text'=>'SUB TITLE',
            'x'=> -20
        ),
        'xAxis'=>array(
            'categories'=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
        ),
        'yAxis'=>array(
            'title'=>array(
                'text'=> 'Temperature (C)',
            ),
        ),
        'tooltip'=>array(
            'valueSuffix'=> 'C'
        ),
        'legend'=>array(
            'layout'=> 'vertical',
            'align'=> 'right',
            'verticalAlign'=> 'middle',
            'borderWidth'=> 0
        ),
        'series'=>array(
            array(
                'name'=> 'Tokyo',
                'data'=>array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6),
            ), 
            array(
                'name'=> 'New York',
                'data'=>array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5),
            ),
            array(
                'name'=> 'Berlin',
                'data'=>array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0),
            ),
            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),
            )
        ),
    )
));
?>



FORMAT: 2

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        'title': {
            'text': 'TITLE: Monthly Average Temperature',
            'x': -20 //center
        },
        'subtitle':{
            'text':'SUB TITLE',
            'x': -20
        },
        'xAxis':{
            'categories':['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        'yAxis':{
            'title':{
                'text': 'Temperature (C)',
            },
        },
        'tooltip':{
            'valueSuffix': 'C'
        },
        'legend':{
            'layout': 'vertical',
            'align': 'right',
            'verticalAlign': 'middle',
            'borderWidth': 0
        },
        'series': [{
            'name': 'Tokyo',
            'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            'name': 'New York',
            'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
            'name': 'Berlin',
            'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
            '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: 1

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        colors: ['#058DC7', '#50B432'],
        chart: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            },
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1    
        },       
        'title': {
            'text': 'TITLE:Monthly Average Temperature',
            'x': -20 //center
        },
        
        'subtitle': {
            'text': 'SUB TITLE',
            'x': -20
        },
        
        'xAxis': {
            'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        'yAxis': {
            'title': {
                'text': 'Temperature (C)'
            },
        },
        'tooltip': {
            'valueSuffix': 'C'
        },
        'legend': {
            'layout': 'vertical',
            'align': 'right',
            'verticalAlign': 'middle',
            'borderWidth': 0
        },
        'series': [{
            'name': 'Tokyo',
            'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            'name': 'New York',
            'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
            'name': 'Berlin',
            'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
            '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(
        'colors'=>array('#058DC7', '#50B432'),
        'chart'=>array(
            'backgroundColor'=>array(
                'linearGradient'=>array( 'x1'=> 0, 'y1'=> 0, 'x2'=> 1, 'y2'=> 1 ),
                'stops'=>array(
                    array(0, 'rgb(255, 255, 255)'),
                    array(1, 'rgb(240, 240, 255)')
                )
            ),
            'borderWidth'=> 2,
            'plotBackgroundColor'=> 'rgba(255, 255, 255, .9)',
            'plotShadow'=> true,
            'plotBorderWidth'=> 1    
        ),       
       'title'=> array(
            'text'=> 'TITLE: Monthly Average Temperature',
            'x'=> -20 //center
        ),
        'subtitle'=>array(
            'text'=>'SUB TITLE',
            'x'=> -20
        ),
        'xAxis'=>array(
            'categories'=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
        ),
        'yAxis'=>array(
            'title'=>array(
                'text'=> 'Temperature (C)',
            ),
        ),
        'tooltip'=>array(
            'valueSuffix'=> 'C'
        ),
        'legend'=>array(
            'layout'=> 'vertical',
            'align'=> 'right',
            'verticalAlign'=> 'middle',
            'borderWidth'=> 0
        ),
        'series'=>array(
            array(
                'name'=> 'Tokyo',
                'data'=>array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6),
            ), 
            array(
                'name'=> 'New York',
                'data'=>array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5),
            ),
            array(
                'name'=> 'Berlin',
                'data'=>array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0),
            ),
            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),
            )
        ),
    )
));
?>

FORMAT: 1

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00'],
        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',
            'x': -20 //center
        },
        'subtitle': {
            style: {
                color: '#FF0000',
            },
            'text': 'SUB TITLE',
            'x': -20
         },
        
        'xAxis': {
            'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        'yAxis': {
            'title': {
                'text': 'Temperature (C)'
            },
        },
        'tooltip': {
            'valueSuffix': 'C'
        },
        'legend': {
            'layout': 'vertical',
            'align': 'right',
            'verticalAlign': 'middle',
            'borderWidth': 0
        },
        'series': [{
            'name': 'Tokyo',
            'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            'name': 'New York',
            'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
            'name': 'Berlin',
            'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
            '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(
        'colors'=>array('#058DC7', '#50B432', '#ED561B', '#DDDF00'),
        'chart'=>array(
                'backgroundColor'=>array(
                'linearGradient'=>array( 'x1'=> 0, 'y1'=> 0, 'x2'=> 0, 'y2'=> 1 ),
                'stops'=>array(
                    array(0, 'rgb(96, 96, 96)'),
                    array(1, 'rgb(16, 16, 16)')
                )
            ),
            'borderWidth'=> 0,
            'borderRadius'=> 15,
            'plotBackgroundColor'=> null,
            'plotShadow'=> false,
            'plotBorderWidth'=> 0
        ),       
        'title'=>array(
            'style'=>array(
                'color'=>'#FFF',
            ),
            'text'=> 'TITLE: Monthly Average Temperature',
            'x'=> -20 //center
        ),
        'subtitle'=>array(
            'style'=>array(
                'color'=>'#FF0000',
            ),
            'text'=> 'SUB TITLE',
            'x'=> -20
         ),
        'xAxis'=>array(
            'categories'=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
        ),
        'yAxis'=>array(
            'title'=>array(
                'text'=> 'Temperature (C)',
            ),
        ),
        'tooltip'=>array(
            'valueSuffix'=> 'C'
        ),
        'legend'=>array(
            'layout'=> 'vertical',
            'align'=> 'right',
            'verticalAlign'=> 'middle',
            'borderWidth'=> 0
        ),
        'series'=>array(
            array(
                'name'=> 'Tokyo',
                'data'=>array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6),
            ), 
            array(
                'name'=> 'New York',
                'data'=>array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5),
            ),
            array(
                'name'=> 'Berlin',
                'data'=>array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0),
            ),
            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),
            )
        ),
    )
));
?>

FORMAT: 1

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>array(
        'title'=> array(
            'text'=> 'TITLE: Monthly Average Temperature',
            'x'=> -20 //center
        ),
        'subtitle'=>array(
            'text'=>'SUB TITLE',
            'x'=> -20
        ),
        'xAxis'=>array(
            'gridLineWidth'=> 1,
            'lineColor'=> '#000',
            'tickColor'=> '#000',            
            'categories'=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
            ),
        'yAxis'=>array(
            'minorTickInterval'=> 'auto',
            'lineColor'=> '#000',
            'lineWidth'=> 1,
            'tickWidth'=> 1,
            'tickColor'=> '#000',            
            'title'=>array(
                'text'=> 'Temperature (C)',
            ),
        ),
        'tooltip'=>array(
            'valueSuffix'=> 'C'
        ),
        'legend'=>array(
            'layout'=> 'vertical',
            'align'=> 'right',
            'verticalAlign'=> 'middle',
            'borderWidth'=> 0
        ),
        'series'=>array(
            array(
                'name'=> 'Tokyo',
                'data'=>array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6),
            ), 
            array(
                'name'=> 'New York',
                'data'=>array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5),
            ),
            array(
                'name'=> 'Berlin',
                'data'=>array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0),
            ),
            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),
            )
        ),
    )
));
?>

FORMAT: 2

<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
    'options'=>"{
        'title': {
            'text': 'TITLE: Monthly Average Temperature',
            'x': -20 //center
        },
        'subtitle':{
            'text':'SUB TITLE',
            'x': -20
        },
        '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':{
            'valueSuffix': 'C'
        },
        'legend':{
            'layout': 'vertical',
            'align': 'right',
            'verticalAlign': 'middle',
            'borderWidth': 0
        },
        'series': [{
            'name': 'Tokyo',
            'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
            'name': 'New York',
            'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
            'name': 'Berlin',
            'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
            '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]
            }]
            }"
));
?>