live chart

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.define('Eagle.model.Cpu', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'load',
            type: 'number'
        },
        {
            name: 'logged_date',
            type: 'date',
            convert: function (v, record) {
                return Ext.Date.format(new Date(v), 'Y-m-d H:i:s');
            }
        }
    ]
});

Ext.define('Eagle.store.CpuStore', {
    extend: 'Ext.data.Store',

    requires: [
        'Eagle.model.Cpu'
    ],

    realtimeData: [],
    counter: 1,

    model: 'Eagle.model.Cpu',

    proxy: {
        type: "ajax",
        url: 'testurl',
        reader: {
            type: 'json',
            root: 'cpus'
        }
    }
});

var cpuStore = Ext.create('Eagle.store.CpuStore');

Ext.define('Eagle.view.charts.RealtimeCpuChart', {
    extend: 'Ext.container.Container',

    xtype: 'realtimeCpuChart',
    itemId: 'realtimeCpuChart',

    requires: ['Ext.chart.series.Line', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Time'],

    layout: {
        type: 'fit'
    },

    items: [
        {
            xtype: 'chart',
            animate: false,
            store: cpuStore,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['load'],
                    title: 'Cpu usage %',
                    grid: true,
                    minimum: 0,
                    maximum: 100
                },
                {
                    type: 'Time',
                    position: 'bottom',
                    fields: ['logged_date'],
                    label: {
                        rotate: {
                            degrees: 315
                        }
                    },
                    constrain: true,
                    dateFormat: 'H:i:s'
                }
            ],
            series: [
                {
                    type: 'line',
                    highlight: {
                        size:...