examples/charts/TipsChart.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require('Ext.chart.*');
  16 Ext.require('Ext.layout.container.Fit');
  17
  18 Ext.onReady(function () {
  19
  20     var pieModel = [
  21         {
  22             name: 'data1',
  23             data: 10
  24         },
  25         {
  26             name: 'data2',
  27             data: 10
  28         },
  29         {
  30             name: 'data3',
  31             data: 10
  32         },
  33         {
  34             name: 'data4',
  35             data: 10
  36         },
  37         {
  38             name: 'data5',
  39             data: 10
  40         }
  41     ];
  42
  43     var pieStore = Ext.create('Ext.data.JsonStore', {
  44         fields: ['name', 'data'],
  45         data: pieModel
  46     });
  47
  48     var pieChart = Ext.create('Ext.chart.Chart', {
  49         width: 100,
  50         height: 100,
  51         animate: false,
  52         store: pieStore,
  53         shadow: false,
  54         insetPadding: 0,
  55         theme: 'Base:gradients',
  56         series: [{
  57             type: 'pie',
  58             field: 'data',
  59             showInLegend: false,
  60             label: {
  61                 field: 'name',
  62                 display: 'rotate',
  63                 contrast: true,
  64                 font: '9px Arial'
  65             }
  66         }]
  67     });
  68
  69     var gridStore = Ext.create('Ext.data.JsonStore', {
  70         fields: ['name', 'data'],
  71         data: pieModel
  72     });
  73
  74     var grid = Ext.create('Ext.grid.Panel', {
  75         store: gridStore,
  76         height: 130,
  77         width: 480,
  78         columns: [
  79             {
  80                 text   : 'name',
  81                 dataIndex: 'name'
  82             },
  83             {
  84                 text   : 'data',
  85                 dataIndex: 'data'
  86             }
  87         ]
  88     });
  89
  90     var panel1 = Ext.create('widget.panel', {
  91         width: 800,
  92         height: 400,
  93         title: 'Line Chart',
  94         renderTo: Ext.getBody(),
  95         layout: 'fit',
  96         items: [{
  97             xtype: 'chart',
  98             animate: true,
  99             shadow: true,
 100             store: store1,
 101             axes: [{
 102                 type: 'Numeric',
 103                 position: 'left',
 104                 fields: ['data1'],
 105                 title: false,
 106                 grid: true
 107             }, {
 108                 type: 'Category',
 109                 position: 'bottom',
 110                 fields: ['name'],
 111                 title: false
 112             }],
 113             series: [{
 114                 type: 'line',
 115                 axis: 'left',
 116                 gutter: 80,
 117                 xField: 'name',
 118                 yField: ['data1'],
 119                 tips: {
 120                     trackMouse: true,
 121                     width: 580,
 122                     height: 170,
 123                     layout: 'fit',
 124                     items: {
 125                         xtype: 'container',
 126                         layout: 'hbox',
 127                         items: [pieChart, grid]
 128                     },
 129                     renderer: function(klass, item) {
 130                         var storeItem = item.storeItem,
 131                             data = [{
 132                                 name: 'data1',
 133                                 data: storeItem.get('data1')
 134                             }, {
 135                                 name: 'data2',
 136                                 data: storeItem.get('data2')
 137                             }, {
 138                                 name: 'data3',
 139                                 data: storeItem.get('data3')
 140                             }, {
 141                                 name: 'data4',
 142                                 data: storeItem.get('data4')
 143                             }, {
 144                                 name: 'data5',
 145                                 data: storeItem.get('data5')
 146                             }], i, l, html;
 147
 148                         this.setTitle("Information for " + storeItem.get('name'));
 149                         pieStore.loadData(data);
 150                         gridStore.loadData(data);
 151                         grid.setSize(480, 130);
 152                     }
 153                 }
 154             }]
 155         }]
 156     });
 157 });
 158