Hi,
Trying to render a chart within a form but doing something wrong but cannot quite see what.
You should be able to see the rendering (or not) from the attached screenshot.
Another pair of eyes on this gratefully accepted.
Thanks in advance
Trying to render a chart within a form but doing something wrong but cannot quite see what.
You should be able to see the rendering (or not) from the attached screenshot.
Code:
Ext.define('ManageWork.view.ChartForm', { alias: 'widget.chartform', border: false, extend: 'WMS.base.Form', layout: { align: 'stretch', pack: 'start', type: 'vbox' }, padding: '15 15 3 15', initComponent: function() { Ext.apply(this,{ items : this.buildItems() }); this.callParent(arguments); }, buildItems: function() { return [{ xtype: 'container', flex: 1, itemId: 'charts', items: [{ itemId: 'TaskChart', xtype: 'taskchart' }] }]; } }); Ext.define('ManageWork.view.TaskChart',{ extend: 'Ext.container.Container', alias: 'widget.taskchart', layout: { type: 'vbox', pack: 'start', align: 'stretch' }, initComponent : function(){ Ext.apply(this,{ items: this.buildItems() }); // Set up subscriptions; // this.subscribeTo = { // scope : this, // locationusageclick : this.onLocationUsageClick // }; this.callParent(arguments); }, buildItems : function(){ return [{ xtype: 'chart', itemId: 'content', flex: 1, animate: true, store: this.buildStore(), axes: this.buildAxes(), series: this.buildSeries() }]; }, buildAxes: function(){ return [{ title: 'Temperature', type: 'Numeric', position: 'left', fields: ['temperature'], minimum: 0, maximum: 100 },{ title: 'Time', type: 'Category', position: 'bottom', fields: ['date'] }]; }, buildSeries: function(){ return [{ type: 'column', axis: 'left', highlight: true, // tips: { // trackMouse: true, // width: 140, // height: 28, // renderer: function(storeItem, item) { // this.setTitle(storeItem.get('LCTD023') + ': ' + storeItem.get('SUM')); // } // }, // label: { // display: 'insideEnd', // 'text-anchor': 'middle', // field: 'data', // renderer: Ext.util.Format.numberRenderer('0'), // orientation: 'vertical', // color: '#333' // }, xField: 'date', yField: 'temperature' }]; }, buildStore: function(){ return Ext.create('Ext.data.Store',{ fields: ['temperature', 'date'], data: [ {temperature: 58, date: '8'}, {temperature: 63, date: '9'}, {temperature: 73, date: '10'}, {temperature: 78, date: '11'}, {temperature: 81, date: '12'} ] }); } // buildStore : function(){ // return Ext.create('Ext.data.Store',{ // fields : ['SUM','LCTP021',{ // name : 'LCTD023', // convert : Valence.util.decodeUTF16 // }], // autoLoad : true, // proxy : { // url : '/valence/vvcall.pgm', // type : 'ajax', // reader : { // type : 'json', // root : 'types' // }, // extraParams : { // pgm : 'deleteme2' // } // } // }); // } // onLocationUsageClick : function(rec){ // this.updateTitle('Location Type - ' + rec.get('MCDS921')); // this.down('chart').store.load({ // params : { // LCCF021 : rec.get('LCCF021') // } // }); // } });
Thanks in advance
Comment