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         columns: [
  78             {
  79                 text   : 'name',
  80                 dataIndex: 'name'
  81             },
  82             {
  83                 text   : 'data',
  84                 dataIndex: 'data'
  85             }
  86         ]
  87     });
  88
  89     var panel1 = Ext.create('widget.panel', {
  90         width: 800,
  91         height: 400,
  92         title: 'Line Chart',
  93         renderTo: Ext.getBody(),
  94         layout: 'fit',
  95         items: [{
  96             xtype: 'chart',
  97             animate: true,
  98             shadow: true,
  99             store: store1,
 100             axes: [{
 101                 type: 'Numeric',
 102                 position: 'left',
 103                 fields: ['data1'],
 104                 title: false,
 105                 grid: true
 106             }, {
 107                 type: 'Category',
 108                 position: 'bottom',
 109                 fields: ['name'],
 110                 title: false
 111             }],
 112             series: [{
 113                 type: 'line',
 114                 axis: 'left',
 115                 gutter: 80,
 116                 xField: 'name',
 117                 yField: ['data1'],
 118                 tips: {
 119                     trackMouse: true,
 120                     width: 580,
 121                     height: 170,
 122                     layout: 'fit',
 123                     items: {
 124                         xtype: 'container',
 125                         layout: 'hbox',
 126                         items: [pieChart, grid]
 127                     },
 128                     renderer: function(klass, item) {
 129                         var storeItem = item.storeItem,
 130                             data = [{
 131                                 name: 'data1',
 132                                 data: storeItem.get('data1')
 133                             }, {
 134                                 name: 'data2',
 135                                 data: storeItem.get('data2')
 136                             }, {
 137                                 name: 'data3',
 138                                 data: storeItem.get('data3')
 139                             }, {
 140                                 name: 'data4',
 141                                 data: storeItem.get('data4')
 142                             }, {
 143                                 name: 'data5',
 144                                 data: storeItem.get('data5')
 145                             }], i, l, html;
 146
 147                         this.setTitle("Information for " + storeItem.get('name'));
 148                         pieStore.loadData(data);
 149                         gridStore.loadData(data);
 150                     }
 151                 }
 152             }]
 153         }]
 154     });
 155 });
 156