examples/charts/TipsChart.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require('Ext.layout.container.Fit');
   3
   4 Ext.onReady(function () {
   5
   6     var pieModel = [
   7         {
   8             name: 'data1',
   9             data: 10
  10         },
  11         {
  12             name: 'data2',
  13             data: 10
  14         },
  15         {
  16             name: 'data3',
  17             data: 10
  18         },
  19         {
  20             name: 'data4',
  21             data: 10
  22         },
  23         {
  24             name: 'data5',
  25             data: 10
  26         }
  27     ];
  28
  29     var pieStore = Ext.create('Ext.data.JsonStore', {
  30         fields: ['name', 'data'],
  31         data: pieModel
  32     });
  33
  34     var pieChart = Ext.create('Ext.chart.Chart', {
  35         width: 100,
  36         height: 100,
  37         animate: false,
  38         store: pieStore,
  39         shadow: false,
  40         insetPadding: 0,
  41         theme: 'Base:gradients',
  42         series: [{
  43             type: 'pie',
  44             field: 'data',
  45             showInLegend: false,
  46             label: {
  47                 field: 'name',
  48                 display: 'rotate',
  49                 contrast: true,
  50                 font: '9px Arial'
  51             }
  52         }]
  53     });
  54
  55     var gridStore = Ext.create('Ext.data.JsonStore', {
  56         fields: ['name', 'data'],
  57         data: pieModel
  58     });
  59
  60     var grid = Ext.create('Ext.grid.Panel', {
  61         store: gridStore,
  62         height: 130,
  63         columns: [
  64             {
  65                 text   : 'name',
  66                 dataIndex: 'name'
  67             },
  68             {
  69                 text   : 'data',
  70                 dataIndex: 'data'
  71             }
  72         ]
  73     });
  74
  75     var panel1 = Ext.create('widget.panel', {
  76         width: 800,
  77         height: 400,
  78         title: 'Line Chart',
  79         renderTo: Ext.getBody(),
  80         layout: 'fit',
  81         items: [{
  82             xtype: 'chart',
  83             animate: true,
  84             shadow: true,
  85             store: store1,
  86             axes: [{
  87                 type: 'Numeric',
  88                 position: 'left',
  89                 fields: ['data1'],
  90                 title: false,
  91                 grid: true
  92             }, {
  93                 type: 'Category',
  94                 position: 'bottom',
  95                 fields: ['name'],
  96                 title: false
  97             }],
  98             series: [{
  99                 type: 'line',
 100                 axis: 'left',
 101                 gutter: 80,
 102                 xField: 'name',
 103                 yField: ['data1'],
 104                 tips: {
 105                     trackMouse: true,
 106                     width: 580,
 107                     height: 170,
 108                     layout: 'fit',
 109                     items: {
 110                         xtype: 'container',
 111                         layout: 'hbox',
 112                         items: [pieChart, grid]
 113                     },
 114                     renderer: function(klass, item) {
 115                         var storeItem = item.storeItem,
 116                             data = [{
 117                                 name: 'data1',
 118                                 data: storeItem.get('data1')
 119                             }, {
 120                                 name: 'data2',
 121                                 data: storeItem.get('data2')
 122                             }, {
 123                                 name: 'data3',
 124                                 data: storeItem.get('data3')
 125                             }, {
 126                                 name: 'data4',
 127                                 data: storeItem.get('data4')
 128                             }, {
 129                                 name: 'data5',
 130                                 data: storeItem.get('data5')
 131                             }], i, l, html;
 132
 133                         this.setTitle("Information for " + storeItem.get('name'));
 134                         pieStore.loadData(data);
 135                         gridStore.loadData(data);
 136                     }
 137                 }
 138             }]
 139         }]
 140     });
 141 });