Results 1 to 4 of 4

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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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

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
  •