examples/chart/reload-chart.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 function generateData(){
   8     var data = [];
   9     for(var i = 0; i < 12; ++i){
  10         data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1) * 100]);
  11     }
  12     return data;
  13 }
  14
  15 Ext.onReady(function(){
  16     var store = new Ext.data.ArrayStore({
  17         fields: ['month', 'hits'],
  18         data: generateData()
  19     });
  20
  21     new Ext.Panel({
  22         width: 700,
  23         height: 400,
  24         renderTo: document.body,
  25         title: 'Column Chart with Reload - Hits per Month',
  26         tbar: [{
  27             text: 'Load new data set',
  28             handler: function(){
  29                 store.loadData(generateData());
  30             }
  31         }],
  32         items: {
  33             xtype: 'columnchart',
  34             store: store,
  35             yField: 'hits',
  36             url: '../../resources/charts.swf',
  37             xField: 'month',
  38             xAxis: new Ext.chart.CategoryAxis({
  39                 title: 'Month'
  40             }),
  41             yAxis: new Ext.chart.NumericAxis({
  42                 title: 'Hits'
  43             }),
  44             extraStyle: {
  45                xAxis: {
  46                     labelRotation: -90
  47                 }
  48             }
  49         }
  50     });
  51 });