/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){

    var store = new Ext.data.JsonStore({
        fields:['GP', 'Barichello', 'Button', 'Räikkönen', 'Vettel', 'Webber'],
        data: [
            {GP:'UK', Barichello: 41, Button: 64, Räikkönen: 10, Vettel: 39, Webber: 35.5},
            {GP:'DE', Barichello: 44, Button: 68, Räikkönen: 10, Vettel: 47, Webber: 45.5},
            {GP:'HU', Barichello: 44, Button: 70, Räikkönen: 18, Vettel: 47, Webber: 51.5},
            {GP:'EU', Barichello: 54, Button: 72, Räikkönen: 24, Vettel: 47, Webber: 51.5},
            {GP:'BE', Barichello: 56, Button: 72, Räikkönen: 34, Vettel: 53, Webber: 51.5},
            {GP:'IT', Barichello: 66, Button: 80, Räikkönen: 40, Vettel: 54, Webber: 51.5},
            {GP:'SG', Barichello: 69, Button: 84, Räikkönen: 40, Vettel: 59, Webber: 51.5},
            {GP:'JP', Barichello: 71, Button: 85, Räikkönen: 45, Vettel: 69, Webber: 51.5}
        ]
    });



    // more complex with a custom look
    new Ext.Panel({
        iconCls:'chart',
        title: 'Grand Prix Formula 1, 2009',
        frame:true,
        renderTo: 'container',
        width:600,
        height:400,
        layout:'fit',

        items: {
            xtype: 'columnchart',
            store: store,
            url:'../../resources/charts.swf',
            xField: 'GP',
            yAxis: new Ext.chart.NumericAxis({
                displayName: 'GP',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record, index, series){
                if(series.yField == 'Barichello'){
                    return 'Barichello: ' + Ext.util.Format.number(record.data.Barichello, '0,0') + ' points after ' + record.data.GP;
                }
                if(series.yField == 'Button'){
                    return 'Button: ' + Ext.util.Format.number(record.data.Button, '0,0') + ' points after ' + record.data.GP;
                }
                if(series.yField == 'Räikkönen'){
                    return 'Räikkönen: ' + Ext.util.Format.number(record.data.Räikkönen, '0,0') + ' points after ' + record.data.GP;
                }
                if(series.yField == 'Vettel'){
                    return 'Vettel: ' + Ext.util.Format.number(record.data.Vettel, '0,0') + ' points after ' + record.data.GP;
                }
                if(series.yField == 'Webber'){
                    return 'Webber: ' + Ext.util.Format.number(record.data.Webber, '0,0') + ' points after ' + record.data.GP;
                }
            },
			extraStyle: {
				legend: {
					display: 'bottom'
				}
			},
            chartStyle: {
                padding: 10,
                animationEnabled: true,
                font: {
                    name: 'Tahoma',
                    color: 0x444444,
                    size: 11
                },
                dataTip: {
                    padding: 5,
                    border: {
                        color: 0x99bbe8,
                        size:1
                    },
                    background: {
                        color: 0xDAE7F6,
                        alpha: .9
                    },
                    font: {
                        name: 'Tahoma',
                        color: 0x15428B,
                        size: 10,
                        bold: true
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{
                type: 'line',
                displayName: 'Barichello',
                yField: 'Barichello',
                style: {
                    color:0x99BBE8
                }
            },{
                type:'line',
                displayName: 'Button',
                yField: 'Button',
                style: {
                    color: 0x15428B
                }
            },{
                type:'line',
                displayName: 'Räikkönen',
                yField: 'Räikkönen',
                style: {
                    color: 0x0000FF
                }
            },{
                type:'line',
                displayName: 'Vettel',
                yField: 'Vettel',
                style: {
                    color: 0x00FF00
                }
            },{
                type:'line',
                displayName: 'Webber',
                yField: 'Webber',
                style: {
                    color: 0xFF0000
                }
            }
			]
        }
    });
});