Results 1 to 4 of 4

Thread: Migration from ExtJs 4 to 5.1.1 Line chart not display lines

  1. #1
    Touch Premium Member
    Join Date
    Mar 2012
    Posts
    115
    Answers
    13

    Default Answered: Migration from ExtJs 4 to 5.1.1 Line chart not display lines

    HI,

    Migrating from ExtTs 4 to ExtJs 5.1.1 and I have an animated line chart that displays everything, legend, grid, the data loads but the lines do not plot. Any pointers where to start looking?

    Below is ExtJS4
    Extjs4.jpg



    Below is ExtJs 5.1.1
    ExtJs5.jpg

    Code:
    Ext.define('analytics.controller.eventdailey', {	extend: 'Ext.app.Controller',
    	
    	requires:['Ext.data.*','Ext.chart.*','analytics.view.eventdaily','analytics.view.frontPagePanel','analytics.model.daileyeventsmodel','analytics.store.eventDailyStore'],
    	 
    	views: ['eventdaily','frontPagePanel'],
    	
    	models: ['daileyeventsmodel'],
    	
    	stores:['eventDailyStore'],
    	
    	objViewPort:'',//store the panel object so we can add items to it
    	objMainView:'',
    	dailyEventDisplay:false,
    	dailyEventView:'',
    	reportsRunning: false,
    	currentRec: 0,
    	storeCount: '',
    	recObj: '',
    	axisStartDate:'',
    	axisEndDate:'',
    	timeAxis:'',
    	numberAxis:'',
    	chart:'',
    	dailyEventStore:'',
    	liveStore:'',
    	intr:'',
    	monthlyStats:'',
    	calculateYnumber: true,
    	maxValue: 100,
    	/**
    	 * Set up form listners
    	 */
    	init: function() {
    		this.control({
    			'toolbar #DailyEventMenuItem' : {
    				click: this.DailyEvent
    			},
    			'toolbar #defaultMenuItem' : {
    				click: this.setDefault
    			}
    		});
    		this.monthlyStats = {
    	     		assetscreated: 0,
    	     		assetscreatedTotal: 0,
    	     		assetscreatedDate:'',
    	       		assetscopied: 0,
    	       		assetscopiedTotal: 0,
    	       		assetscopiedDate:'',
    	        	DownLoadHiRes: 0,
    	        	DownLoadHiResTotal: 0,
    	        	DownLoadHiResDate:'',
    	        	DownLoadFPO: 0,
    	        	DownLoadFPOTotal: 0,
    	        	DownLoadFPODate:'',
    	        	UploadFiles: 0,
    	        	UploadFilesTotal: 0,
    	        	UploadFilesDate:'',
    	        	CustomImageOrder: 0,
    	        	CustomImageOrderTotal: 0,
    	        	CustomImageOrderDate:''
    	    }
         },
         
          /**
         * call when the control is launched
         */
        onLaunch: function() {
         	if (analyticsConfigObj.debug) console.log("Initializing Event Daily");
         	
         },
        setDefault: function() {
        	Ext.state.Manager.clear('dailyEventView');
        	this.DailyEvent();
        	this.dailyEventView.setPosition(analyticsXML.data.dailyEventLeft,analyticsXML.data.dailyEventTop);
        	this.dailyEventView.setSize(analyticsXML.data.dailyEventWidth,analyticsXML.data.dailyEventHeight);
        	this.dailyEventView.fireEvent('move');
        },
    	DailyEvent: function() {
    		if (this.dailyEventDisplay) {
    			this.dailyEventView.toFront();
    			if (!this.dailyEventView.maximized) this.dailyEventView.restore();
    			return;
    		}
        
        	this.liveStore = Ext.create('Ext.data.JsonStore', {
            fields: [
    		        { name: 'assetscreated', type: 'int',defaultValue: 0},
    		        { name: 'assetscopied',type: 'int',defaultValue: 0},
    		        { name: 'DownLoadHiRes',type: 'int',defaultValue: 0},
    		        { name: 'DownLoadFPO',type: 'int',defaultValue: 0},
    		        { name: 'UploadFiles',type: 'int',defaultValue: 0},
    		        { name: 'CustomImageOrder',type: 'int',defaultValue: 0},
    		        { name: 'displaydate', type: 'string',defaultValue:''},
    		        { name: 'eventDate', type: 'date',dateFormat: 'm/d/Y'},
    		        {name: 'isdir',  type: 'boolean', defaultValue: false}
        	]
       		});
       		
    		
    		this.intr;
    		//create most popular window
    		this.dailyEventView = Ext.getCmp('frontpagemainviewarea').add({
    			xtype : 'diskspace',
    			x:analyticsXML.data.dailyEventLeft,
    			y:analyticsXML.data.dailyEventTop,
    			renderTo:'frontpagemainviewarea',
    			width:analyticsXML.data.dailyEventWidth,
    			height: analyticsXML.data.dailyEventHeight,
    			title : analyticsXML.data.dailyEventTitle,
    			collapsible: true,
    			stateful : true,//remember where the user left it
    			stateId : 'dailyEventView',
    			layout:'absolute',
    			tools: [
    				{ 
    			        id: 'refresh',
    			        tooltip: analyticsXML.data.dailyEventPauseResume,
    			        scope:this,
    			        handler: function(e, toolEl, panel, tc){
    			        	if (this.reportsRunning) {
    			            	window.clearInterval(this.intr);
    			            	this.reportsRunning = false;
    			            } else {
    			            	var me = this;
    							this.intr = setInterval(function() {me.startChartInterval()} ,1000);
    			            	this.reportsRunning = true;
    			            }
    			             
    			        }
    		    	},
    		    	{
    			    	type:'gear',
    			    	scope:this,
    			    	tooltip: analyticsXML.data.dailyEventShowTotals,
    	            	handler: function(){
    	                  var templ =  '<table id="eventdaily"><caption>' + analyticsXML.data.dailyEventHighestTotal + '</caption>' +
    	                  '<tr class="dailyoddrow"><th>' + analyticsXML.data.dailyEventEventHead + '</th><th>' + analyticsXML.data.dailyEventHighestHead + '</th><th class="dailynumbers">' + analyticsXML.data.dailyEventTotalHead + '</th><th class="dailynumbers">' + analyticsXML.data.dailyEventAverageHead + '</th></tr>' +
    	                 
    	                  '<tr class="dailyevenrow"><td>' + analyticsXML.data.dailyEventCreated +'</td><td>' + this.monthlyStats['assetscreatedDate'] + ' (' + this.monthlyStats['assetscreated'] +')</td><td class="dailynumbers">' + this.monthlyStats['assetscreatedTotal'] + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['assetscreatedTotal'] /this.storeCount) + '</td></tr>' +
    	                  
    	                  '<tr class="dailyoddrow"><td>' + analyticsXML.data.dailyEventCopied +'</td><td>' + this.monthlyStats['assetscopiedDate'] + ' (' + this.monthlyStats['assetscopied'] +')</td><td class="dailynumbers">' + this.monthlyStats['assetscopiedTotal']  + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['assetscopiedTotal'] /this.storeCount) + '</td></tr>' +
    	                  
    	                  '<tr class="dailyevenrow"><td>' + analyticsXML.data.dailyEventHiRes +'</td><td>' + this.monthlyStats['DownLoadHiResDate'] + ' (' + this.monthlyStats['DownLoadHiRes'] +')</td><td class="dailynumbers">' + this.monthlyStats['DownLoadHiResTotal']  + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['DownLoadHiResTotal'] /this.storeCount) + '</td></tr>' +
    	                  
    	                  '<tr class="dailyoddrow"><td>' + analyticsXML.data.dailyEventFpo +'</td><td>' + this.monthlyStats['DownLoadFPODate'] + ' (' + this.monthlyStats['DownLoadFPO'] +')</td><td class="dailynumbers">' + this.monthlyStats['DownLoadFPOTotal']  + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['DownLoadFPOTotal'] /this.storeCount) + '</td></tr>' +
    	                   
    	                  '<tr class="dailyevenrow"><td>' + analyticsXML.data.dailyEventUploads +'</td><td>' + this.monthlyStats['UploadFilesDate'] + ' (' + this.monthlyStats['UploadFiles'] +')</td><td class="dailynumbers">' + this.monthlyStats['UploadFilesTotal']  + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['UploadFilesTotal'] /this.storeCount) + '</td></tr>' +
    	                  
    	                  '<tr class="dailyoddrow"><td>' + analyticsXML.data.dailyEventImageOrder +'</td><td>' + this.monthlyStats['CustomImageOrderDate'] + ' (' + this.monthlyStats['CustomImageOrder'] +')</td><td class="dailynumbers">' + this.monthlyStats['CustomImageOrderTotal']  + 
    	                  	'</td><td class="dailynumbers">' + Math.round(this.monthlyStats['CustomImageOrderTotal'] /this.storeCount) + '</td></tr></table>';
    	                  Ext.Msg.show({
    			  			// title: analyticsXML.data.dailyEventHighestTotal,
    			 			 msg: templ,
    			 			 width: 300,
    			             buttons: Ext.Msg.OK,
    			 			 icon: null
    					});
    	               }
    		    	}
    		    ],
    			listeners: {
    				scope:this,
    				beforeclose: function (ele, eopts) {
    					this.dailyEventDisplay = false;
    					this.reportsRunning = false;
    					window.clearInterval(this.intr);
    					Ext.util.Cookies.clear("anadailyeventwindow");
    				}
    			}
    		});//
    		//Ext.chart.Chart
    		//Ext.chart.CartesianChart
    		/*
    		var colors = ['url(#disk1)','url(#disk2)','url(#disk3)','url(#disk4)','url(#disk5)',
     		'url(#disk6)','url(#disk7)','url(#disk8)','url(#disk9)','url(#disk10)',
     		'url(#disk11)','url(#disk12)','url(#disk13)','url(#disk14)','url(#disk15)',
     		'url(#disk16)','url(#disk17)','url(#disk18)','url(#disk19)'];*/
    		
    		console.log("chart here 1");
    		var lineChart = Ext.create('Ext.chart.Chart', {
    						   anchor:  '-0 -0',
    						   id: 'dailyeventChart',
    						   layout: 'absolute',
    						   store: this.liveStore,
    						   shadow: true,
    				           animate: true,
    				           legend: {
    				                position: 'top'
    				            },
    				            axes: [{
    				                type: 'numeric',
    				                grid: true,
    				                minimum: 0,
    				                maximum: this.maxValue,
    				                position: 'left',
    				                fields: ['assetscreated', 'assetscopied', 'DownLoadHiRes','DownLoadFPO','UploadFiles','CustomImageOrder'],
    				                title: 'Number of Events',
    				                grid: {
    				                    odd: {
    				                        fill: '#dedede',
    				                        stroke: '#ddd',
    				                        'stroke-width': 0.5
    				                    }
    				                }
    				            }, {
    				                type: 'time',
    				                position: 'bottom',
    				                fields: 'eventDate',
    				                title: 'Day',
    				                dateFormat: 'M d',
    				               	groupBy: 'year,month,day',
    				               	aggregateOp: 'sum',
    				                constrain: true,
    				                //y - m - d
    				                fromDate: Ext.Date.add(new Date(), Ext.Date.DAY, -7),
    				               	toDate: new Date(),
    				                grid: true
    				            }],
    				            series: [{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                xField: 'eventDate',
    				                yField: 'assetscreated',
    				                title: analyticsXML.data.dailyEventCreated,
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#38469D'
    				                },
    				              tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventCreated + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('assetscreated') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#38469D',
    								    smooth: true,
    								    lineWidth: 3,
    								    'stroke-width': 3
    								}
    				            },{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                
    				                xField: 'eventDate',
    				                yField: 'assetscopied',
    				                title: analyticsXML.data.dailyEventCopied, 
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#38739C'
    				                },
    				                tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventCopied + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('assetscopied') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#38739C',
    								    smooth: true,
    								    'stroke-width': 3,
    								    lineWidth: 3
    								}
    				            },{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                xField: 'eventDate',
    				                yField: 'DownLoadHiRes',
    				                title: analyticsXML.data.dailyEventHiRes, 
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#09650B'
    				                },
    				                tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventCreated + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('DownLoadHiRes') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#09650B',
    								    smooth: true,
    								    'stroke-width': 3,
    								    lineWidth: 3
    								}
    				            },{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                
    				                xField: 'eventDate',
    				                yField: 'DownLoadFPO',
    				                title: analyticsXML.data.dailyEventFpo, 
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#61389C'
    				                },
    				                tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventFpo + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('DownLoadFPO') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#61389C',
    								    smooth: true,
    								    'stroke-width': 3,
    								    lineWidth: 3
    								}
    				            },{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                
    				                xField: 'eventDate',
    				                yField: 'UploadFiles',
    				                title: analyticsXML.data.dailyEventUploads, 
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#9D3896'
    				                },
    				                tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventUploads + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('UploadFiles') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#9D3896',
    								    smooth: true,
    								    'stroke-width': 3
    								}
    				            },{
    				                type: 'line',
    				                axis: ['left', 'bottom'],
    				                
    				                xField: 'eventDate',
    				                yField: 'CustomImageOrder',
    				                title: analyticsXML.data.dailyEventImageOrder, 
    				                label: {
    				                    display: 'none'
    				                },
    				                markerConfig: {
    				                    radius: 5,
    				                    size: 5,
    				                    type: 'circle',
    				                    'stroke-width': 0,
    				                    'fill': '#55B58A'
    				                },
    				                tips: {
    									trackMouse: true,
    									width: 170,
    									height: 28,
    									renderer: function(storeItem, item) {
    								    	this.setTitle(analyticsXML.data.dailyEventImageOrder + ' ' + storeItem.get('displaydate') +':(' + storeItem.get('CustomImageOrder') + ')');
    									}
    				                },
    				                style: {
    								    stroke: '#55B58A',
    								    'stroke-width': 3,
    								    smooth: true,
    								    lineWidth: 3
    								}
    				            }
    				         ]
    				           
    		});
    					   
    		
    		
    		this.dailyEventView.add(lineChart);
    		this.dailyEventView.show();
    		this.dailyEventDisplay = true;
    		
    		this.chart = Ext.getCmp('dailyeventChart');
    		this.timeAxis = this.chart.axes.get(1);
    		this.numberAxis = this.chart.axes.get(0);
    		
    		//create store and get the most popular events
    		this.dailyEventStore = Ext.getStore('eventDailyStore');
    		var cmdParameters = new Object();
    		if (analyticsXML.data.dailyEventDemoEvents) {
    			cmdParameters['_cmd'] = 'fetchdaliyeventsdemo';
    		} else {
    			cmdParameters['_cmd'] = 'fetchdaliyevents';
    		}
    		cmdParameters['interval'] = analyticsXML.data.dailyEventInetrval;
    		this.dailyEventStore.proxy.extraParams = cmdParameters;
    		this.dailyEventStore.load({
    			scope   : this,
    			callback: function(records, operation, success) {
    					console.log(operation.getResponse().responseText);
    					this.reportsRunning = true;
    					this.storeCount = this.dailyEventStore.count(),
    					this.recObj = this.dailyEventStore.getAt(this.currentRec),
    					this.updateStats(this.recObj.data);
    					this.axisStartDate = this.recObj.get('eventDate'),
    					this.axisEndDate = Ext.Date.add(new Date(this.recObj.get('eventDate')), Ext.Date.DAY, 7);
    					
    					this.timeAxis.toDate = this.axisEndDate
    					this.timeAxis.fromDate = this.axisStartDate;
    					this.liveStore.removeAll();
    					this.liveStore.add(this.recObj.copy());
    					this.startChartInterval();
    					var me = this;
    					this.intr = setInterval(function() {me.startChartInterval()} ,1000);
    			}
    		});
    		
    		if (!this.dailyEventView.maximized) this.dailyEventView.restore();
    		Ext.util.Cookies.set("anadailyeventwindow",true,this.makeYearExpDate());
    		return;
    	},
    	/**
    	 * This is called on an interval and gets the next record from the real store
    	 * copies the record into the spoof store one at a time
    	 */
    	startChartInterval: function() {		
    		scope = this;
    		//increase count
    		this.currentRec++;
    		if (this.currentRec >= this.storeCount) {
    			//if we have reach the end of the record count
    			//reset and start over
    			this.currentRec = 0;
    			this.liveStore.removeAll();
    			this.timeAxis.toDate = this.axisEndDate
    			this.timeAxis.fromDate = this.axisStartDate;
    			this.calculateYnumber = false;
    		}
    		
    		//get the current record
    		this.recObj = this.dailyEventStore.getAt(this.currentRec);
    		
    		if (this.calculateYnumber) this.updateStats(this.recObj.data);
    		//set up vars get the next date
    		var toDate = this.timeAxis.toDate,
    			nextdate = this.recObj.get('eventDate'),
    				markerIndex = this.chart.markerIndex || 0;
    		 if (+toDate < +nextdate) {
                markerIndex = 1;
                this.timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(this.timeAxis.fromDate), Ext.Date.DAY, 1);
                this.timeAxis.toDate = nextdate;
    		}	
    		//console.log(this.timeAxis.fromDate + ":" + this.timeAxis.toDate); 
    		this.chart.markerIndex = markerIndex;
    		this.liveStore.add(this.recObj.copy());
    	},//monthlyStats
    	updateStats: function(rec) {
    		for (var prop in rec) {
    			if (rec.hasOwnProperty(prop)) {
    				if (isNaN(rec[prop])) continue;
    				if (prop == 'isdir' || prop == 'eventDate') continue;
    				var value = rec[prop];
    				//console.log(rec[prop] + ":" +value);
    				if (value > this.maxValue) {
    					this.maxValue = value;
    					this.numberAxis.maximum = this.maxValue;
    				}
    				this.monthlyStats[prop +'Total'] += value;
    				if (value > this.monthlyStats[prop]) {
    					this.monthlyStats[prop] = value;
    					this.monthlyStats[prop +'Date'] = rec['displaydate'];
    				}
    			}
    		}
    		//console.log("mac value" + this.maxValue);
    		//console.log("axis number " + this.numberAxis.maximum);
    	},
    	makeYearExpDate: function ( yr ) {
    	    var now = new Date();
    	   	var expiry = new Date(now.getTime() + 365 * 24 * 60 * 60 * 1000);
    	    return expiry;
    	}
    });
    thanks
    harry

  2. Fixed the issue, it was the store that needed changing.

    This would not work.

    Code:
    this.liveStore.add(this.recObj.copy());
    I had to use an array and push the data to the array and then load the array into the store.

    Code:
    startChartInterval: function() {		var recObj;
    		//increase count
    		this.currentRec++;
    		//check if we ned to reset chart and start 30 day loop over
    		if (this.currentRec >= this.storeCount) {
    			//if we have reach the end of the record count
    			//reset and start over
    			this.currentRec = 0;
    			this.chart.markerIndex = 0;
    			//reset array
    			this.liveData = [];
    			this.liveStore.removeAll();
    			this.calculateYnumber = false;
    			this.chart.surface.removeAll();
    			this.liveStore.loadData(this.liveData);
    			this.timeAxis.toDate = this.axisEndDate
    			this.timeAxis.fromDate = this.axisStartDate;
    			this.chart.redraw();
    		}
    		//get the current record
    		recObj = this.dailyEventStore.getAt(this.currentRec);
    		
    		if (this.calculateYnumber) this.updateStats(recObj.data);
    		//set up vars get the next date
    		var toDate = this.timeAxis.toDate,
    			nextdate = recObj.get('eventDate'),
    				markerIndex = this.chart.markerIndex || 0;
    		
    		 if (+toDate < +nextdate) {
                markerIndex = 1;
                this.timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(this.timeAxis.fromDate), Ext.Date.DAY, 1);
                this.timeAxis.toDate = nextdate;
                this.chart.markerIndex = markerIndex;
    		}	
    		this.liveData.push(recObj.data);
    		this.liveStore.loadData(this.liveData);
    }
    thanks
    harry

  3. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014
    Posts
    962
    Answers
    55

    Default

    Hi harrypottar,

    While I haven't tested your example, fiddle (https://fiddle.sencha.com) is best, have you reviewed the migration docs for 4 to 5? I've included the guides but there were significant changes from those versions, you might be better served refactoring.

    https://docs.sencha.com/extjs/5.0/wh...ade_guide.html

    https://docs.sencha.com/extjs/5.0/wh...ade_guide.html


    Regards,
    Bryan

  4. #3
    Touch Premium Member
    Join Date
    Mar 2012
    Posts
    115
    Answers
    13

    Default

    Can you give an example or explain this better

    "One should use marker config instead of markerConfig config to define series markers."

    thanks

    harry

  5. #4
    Touch Premium Member
    Join Date
    Mar 2012
    Posts
    115
    Answers
    13

    Default

    Fixed the issue, it was the store that needed changing.

    This would not work.

    Code:
    this.liveStore.add(this.recObj.copy());
    I had to use an array and push the data to the array and then load the array into the store.

    Code:
    startChartInterval: function() {		var recObj;
    		//increase count
    		this.currentRec++;
    		//check if we ned to reset chart and start 30 day loop over
    		if (this.currentRec >= this.storeCount) {
    			//if we have reach the end of the record count
    			//reset and start over
    			this.currentRec = 0;
    			this.chart.markerIndex = 0;
    			//reset array
    			this.liveData = [];
    			this.liveStore.removeAll();
    			this.calculateYnumber = false;
    			this.chart.surface.removeAll();
    			this.liveStore.loadData(this.liveData);
    			this.timeAxis.toDate = this.axisEndDate
    			this.timeAxis.fromDate = this.axisStartDate;
    			this.chart.redraw();
    		}
    		//get the current record
    		recObj = this.dailyEventStore.getAt(this.currentRec);
    		
    		if (this.calculateYnumber) this.updateStats(recObj.data);
    		//set up vars get the next date
    		var toDate = this.timeAxis.toDate,
    			nextdate = recObj.get('eventDate'),
    				markerIndex = this.chart.markerIndex || 0;
    		
    		 if (+toDate < +nextdate) {
                markerIndex = 1;
                this.timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(this.timeAxis.fromDate), Ext.Date.DAY, 1);
                this.timeAxis.toDate = nextdate;
                this.chart.markerIndex = markerIndex;
    		}	
    		this.liveData.push(recObj.data);
    		this.liveStore.loadData(this.liveData);
    }
    thanks
    harry

Similar Threads

  1. Replies: 4
    Last Post: 4 Feb 2014, 11:56 PM
  2. Replies: 4
    Last Post: 17 Sep 2013, 6:40 AM
  3. Replies: 3
    Last Post: 6 Dec 2012, 7:51 AM
  4. extjs line chart display
    By sagar21789 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 May 2012, 5:26 AM
  5. How to display Tips in Group Line Chart in Extjs 4 ?
    By gauravp in forum Ext: Discussion
    Replies: 0
    Last Post: 8 Jun 2011, 4:29 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •