examples/charts/Line.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
   3
   4 Ext.onReady(function () {
   5     store1.loadData(generateData(8));
   6
   7     var win = Ext.create('Ext.Window', {
   8         width: 800,
   9         height: 600,
  10         hidden: false,
  11         maximizable: true,
  12         title: 'Line Chart',
  13         renderTo: Ext.getBody(),
  14         layout: 'fit',
  15         tbar: [{
  16             text: 'Reload Data',
  17             handler: function() {
  18                 store1.loadData(generateData(8));
  19             }
  20         }],
  21         items: {
  22             xtype: 'chart',
  23             style: 'background:#fff',
  24             animate: true,
  25             store: store1,
  26             shadow: true,
  27             theme: 'Category1',
  28             legend: {
  29                 position: 'right'
  30             },
  31             axes: [{
  32                 type: 'Numeric',
  33                 minimum: 0,
  34                 position: 'left',
  35                 fields: ['data1', 'data2', 'data3'],
  36                 title: 'Number of Hits',
  37                 minorTickSteps: 1,
  38                 grid: {
  39                     odd: {
  40                         opacity: 1,
  41                         fill: '#ddd',
  42                         stroke: '#bbb',
  43                         'stroke-width': 0.5
  44                     }
  45                 }
  46             }, {
  47                 type: 'Category',
  48                 position: 'bottom',
  49                 fields: ['name'],
  50                 title: 'Month of the Year'
  51             }],
  52             series: [{
  53                 type: 'line',
  54                 highlight: {
  55                     size: 7,
  56                     radius: 7
  57                 },
  58                 axis: 'left',
  59                 xField: 'name',
  60                 yField: 'data1',
  61                 markerConfig: {
  62                     type: 'cross',
  63                     size: 4,
  64                     radius: 4,
  65                     'stroke-width': 0
  66                 }
  67             }, {
  68                 type: 'line',
  69                 highlight: {
  70                     size: 7,
  71                     radius: 7
  72                 },
  73                 axis: 'left',
  74                 smooth: true,
  75                 xField: 'name',
  76                 yField: 'data2',
  77                 markerConfig: {
  78                     type: 'circle',
  79                     size: 4,
  80                     radius: 4,
  81                     'stroke-width': 0
  82                 }
  83             }, {
  84                 type: 'line',
  85                 highlight: {
  86                     size: 7,
  87                     radius: 7
  88                 },
  89                 axis: 'left',
  90                 smooth: true,
  91                 fill: true,
  92                 xField: 'name',
  93                 yField: 'data3',
  94                 markerConfig: {
  95                     type: 'circle',
  96                     size: 4,
  97                     radius: 4,
  98                     'stroke-width': 0
  99                 }
 100             }]
 101         }
 102     });
 103 });