examples/charts/Mixed.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     var win = Ext.create('Ext.Window', {
   7         width: 800,
   8         height: 600,
   9         hidden: false,
  10         maximizable: true,
  11         title: 'Mixed Charts',
  12         renderTo: Ext.getBody(),
  13         layout: 'fit',
  14         tbar: [{
  15             text: 'Reload Data',
  16             handler: function() {
  17                 store1.loadData(generateData(8));
  18             }
  19         }, {
  20             enableToggle: true,
  21             pressed: true,
  22             text: 'Animate',
  23             toggleHandler: function(btn, pressed) {
  24                 var chart = Ext.getCmp('chartCmp');
  25                 chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
  26             }
  27         }],
  28         items: {
  29             id: 'chartCmp',
  30             xtype: 'chart',
  31             style: 'background:#fff',
  32             animate: true,
  33             theme: 'Category1',
  34             store: store1,
  35             axes: [{
  36                 type: 'Numeric',
  37                 position: 'left',
  38                 fields: ['data1', 'data2', 'data3'],
  39                 title: 'Number of Hits',
  40                 grid: true
  41             }, {
  42                 type: 'Category',
  43                 position: 'bottom',
  44                 fields: ['name'],
  45                 title: 'Month of the Year'
  46             }],
  47             series: [{
  48                 type: 'column',
  49                 axis: 'left',
  50                 xField: 'name',
  51                 yField: 'data1',
  52                 markerConfig: {
  53                     type: 'cross',
  54                     size: 3
  55                 }
  56             }, {
  57                 type: 'scatter',
  58                 axis: 'left',
  59                 xField: 'name',
  60                 yField: 'data2',
  61                 markerConfig: {
  62                     type: 'circle',
  63                     size: 5
  64                 }
  65             }, {
  66                 type: 'line',
  67                 axis: 'left',
  68                 smooth: true,
  69                 fill: true,
  70                 fillOpacity: 0.5,
  71                 xField: 'name',
  72                 yField: 'data3'
  73             }]
  74         }
  75     });
  76 });