HTML Code:
Ext.require(['Ext.data.*']);Ext.require('Ext.chart.*');Ext.require('Ext.layout.container.Fit');
Ext.onReady(function() { window.graphStore = Ext.create('Ext.data.JsonStore', { fields: ['data1', 'maxRange', 'minRange', 'date'], data: [{data1: 81, maxRange: 140, minRange: 90, date: '04/02/2011 00:02'}, {data1: 103, maxRange: 140, minRange: 90, date: '04/02/2011 12:02'}, {data1: 30, maxRange: 140, minRange: 90, date: '04/02/2011 13:02'}, {data1: 108, maxRange: 140, minRange: 90, date: '04/02/2011 15:02'}, {data1: 70, maxRange: 140, minRange: 90, date: '04/02/2011 17:02'}] }); var square = Ext.create('Ext.draw.Component', { viewBox: false, items: [{ type: 'rect', fill: '#79BB3F', x: 0, y: 0, width: 100, height: 100 }] });
this.handlePlot = function (t, opts) { console.log(t); }; var chartWW = Ext.create('Ext.chart.Chart',{ xtype: 'chart', animate: false, store: graphStore, insetPadding: 30, listeners: { beforerender: this.handlePlot }, axes: [{ type: 'Numeric', minimum: 0, maximum: 200, grid: true, position: 'left', fields: ['data1'], title: true, grid: true, label: { renderer: Ext.util.Format.numberRenderer('0,0'), font: '10px Arial' } }, { type: 'Category', position: 'bottom', grid: true, fields: ['date'], title: false, label: { font: '11px Arial', renderer: function(name) { return name.substr(0, 3) + ' 07'; } } }], series: [/*{ type: 'area', highlight: true, axis: 'left', xField: 'name', yField: ['minRange','maxRange'], style: { opacity: 0.50 } },*/{ type: 'line', axis: 'left', xField: 'date', yField: 'data1', listeners: { itemmouseup: function(item) { //Ext.example.msg('Item Selected', item.value[0] + ' visits on ' + item.value[3]); } }, tips: { trackMouse: true, width: 145, height: 40, renderer: function(storeItem, item) { this.setTitle('Data 1: ' + storeItem.get('data1') + '<br />date : ' + storeItem.get('date')); } }, style: { fill: '#38B8BF', stroke: '#38B8BF', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#38B8BF', strokre: '#38B8BF' } }] }); var mainPanel = Ext.create('widget.panel', { width: 600, height: 300, title: 'Graphic', renderTo: Ext.getBody(), layout: 'fit', items: [chartWW, square] });});