docs/source/reload-chart.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">function generateData(){\r
   9     var data = [];\r
  10     for(var i = 0; i < 12; ++i){\r
  11         data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1) * 100]);\r
  12     }\r
  13     return data;\r
  14 }\r
  15 \r
  16 Ext.onReady(function(){\r
  17     var store = new Ext.data.ArrayStore({\r
  18         fields: ['month', 'hits'],\r
  19         data: generateData()\r
  20     });\r
  21     \r
  22     new Ext.Panel({\r
  23         width: 700,\r
  24         height: 400,\r
  25         renderTo: document.body,\r
  26         title: 'Column Chart with Reload - Hits per Month',\r
  27         tbar: [{\r
  28             text: 'Load new data set',\r
  29             handler: function(){\r
  30                 store.loadData(generateData());\r
  31             }\r
  32         }],\r
  33         items: {\r
  34             xtype: 'columnchart',\r
  35             store: store,\r
  36             yField: 'hits',\r
  37             xField: 'month',\r
  38             xAxis: new Ext.chart.CategoryAxis({\r
  39                 title: 'Month'\r
  40             }),\r
  41             yAxis: new Ext.chart.NumericAxis({\r
  42                 title: 'Hits'\r
  43             }),\r
  44             extraStyle: {\r
  45                xAxis: {\r
  46                     labelRotation: -90\r
  47                 }\r
  48             }\r
  49         }\r
  50     });\r
  51 });</pre>    \r
  52 </body>\r
  53 </html>