extjs - highcharts - plotline test

by marcme

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/Serie.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/LineSerie.js"></script>
<script src="http://joekuan.org/demos/Highcharts_Sencha/Chart/ux/Highcharts/SplineSerie.js"></script>

JavaScript

var store = new Ext.data.ArrayStore({
    fields: ['month', 'value'],
    data : [
        ['jan', 1],
        ['feb', 2],
        ['mar', 3],
        ['apr', 4],
        ['mai', 5],
        ['jun', 6],
        ['jul', 16],
        ['aug', 2],
        ['sep', 7],
        ['oct', 4],
        ['nov', 3],
        ['dec', 11]
    ]
});

var chart = Ext.create('Chart.ux.Highcharts', {
    series:[{
        dataIndex: 'value'
    }],
    xField: 'month',
    store: store,
    chartConfig: {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'A simple graph'
        },
        xAxis: {
            plotLines: [{
                color: '#FF0000',
                width: 5,
                value: 'mar'
            }]
        }
    }
});

Ext.create('Ext.panel.Panel',{
    title: 'Highcharts-Test',
    width: 500,
    height: 500,
    layout: 'fit',
    renderTo: Ext.getBody(),
    items: [ chart ]
});

store.load();