examples/portal/classes/ChartPortlet.js

   1 Ext.define('Ext.app.ChartPortlet', {
   2
   3     extend: 'Ext.panel.Panel',
   4     alias: 'widget.chartportlet',
   5
   6     requires: [
   7         'Ext.data.JsonStore',
   8         'Ext.chart.theme.Base',
   9         'Ext.chart.series.Series',
  10         'Ext.chart.series.Line',
  11         'Ext.chart.axis.Numeric'
  12     ],
  13
  14     generateData: function(){
  15         var data = [{
  16                 name: 'x',
  17                 djia: 10000,
  18                 sp500: 1100
  19             }],
  20             i;
  21         for (i = 1; i < 50; i++) {
  22             data.push({
  23                 name: 'x',
  24                 sp500: data[i - 1].sp500 + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7),
  25                 djia: data[i - 1].djia + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7)
  26             });
  27         }
  28         return data;
  29     },
  30
  31     initComponent: function(){
  32
  33         Ext.apply(this, {
  34             layout: 'fit',
  35             width: 600,
  36             height: 300,
  37             items: {
  38                 xtype: 'chart',
  39                 animate: false,
  40                 shadow: false,
  41                 store: Ext.create('Ext.data.JsonStore', {
  42                     fields: ['name', 'sp500', 'djia'],
  43                     data: this.generateData()
  44                 }),
  45                 legend: {
  46                     position: 'bottom'
  47                 },
  48                 axes: [{
  49                     type: 'Numeric',
  50                     position: 'left',
  51                     fields: ['djia'],
  52                     title: 'Dow Jones Average',
  53                     label: {
  54                         font: '11px Arial'
  55                     }
  56                 }, {
  57                     type: 'Numeric',
  58                     position: 'right',
  59                     grid: false,
  60                     fields: ['sp500'],
  61                     title: 'S&P 500',
  62                     label: {
  63                             font: '11px Arial'
  64                         }
  65                 }],
  66                 series: [{
  67                     type: 'line',
  68                     lineWidth: 1,
  69                     showMarkers: false,
  70                     fill: true,
  71                     axis: 'left',
  72                     xField: 'name',
  73                     yField: 'djia',
  74                     style: {
  75                         'stroke-width': 1
  76                     }
  77                 }, {
  78                     type: 'line',
  79                     lineWidth: 1,
  80                     showMarkers: false,
  81                     axis: 'right',
  82                     xField: 'name',
  83                     yField: 'sp500',
  84                     style: {
  85                         'stroke-width': 1
  86                     }
  87                 }]
  88             }
  89         });
  90
  91         this.callParent(arguments);
  92     }
  93 });