Results 1 to 2 of 2

Thread: Chart Issue

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Location
    Belgrade
    Posts
    5

    Question Chart Issue

    Hi all,
    I have an issue with line chart in my application. Occasionally, when I load the chart it shows only a part of it, as shown on first image.

    partofchart.jpg

    If I do it again, it usually loads completely, as show on second picture. This is happening more often when I have more data to plot.

    fullchart.jpg


    There are no errors in console, and data store loads completely which can be seen from the charts time axis.
    The code is below. Thank you in advance!

    Loading / reloading of the chart:

    Code:
    var chart = Ext.ComponentQuery.query('#linechart')[0];
    var store = chart.getStore();
    
    store.load({
    	params: {sessid: record.get('session_id')},
    	callback : function(r, options, success) {
    		var chart = Ext.ComponentQuery.query('#linechart')[0];
    		
    		try {				
    		  chart.axes.get(0).fromDate = new Date(store.getAt(0).get('Time'));	
    		} catch(err){			 
    		}
    		
    		try {
    		 chart.axes.get(0).toDate = new Date(store.getAt(store.totalCount-1).get('Time'));	
    		 chart.axes.get(0).majorTickSteps = 10;							 
    		} catch(err){				
    		}
    		
    		try {
    			chart.redraw();
    		} catch(err){				
    		}
    		var pnl = Ext.ComponentQuery.query('#tabOldSession')[0];
    		pnl.setLoading(false);
    	}
    
    });
    Definition of the chart:

    Code:
    xtype: 'chart',
    autoShow: true,
    border: false,
    height: 200,
    itemId: 'linechart',
    animate: true,
    background: {
    	fill: '#fff'
    },
    insetPadding: 5,
    store: 'grpLiveData',
    axes: [
    	{
    		type: 'Time',
    		groupBy: 'year,month,day,M,d',
    		aggregateOp: 'sum',
    		fields: [
    			'Time'
    		],
    		position: 'bottom',
    		step: [Ext.Date.SECOND, 20],
    		grid: true,
    		constrain: true,
    		dateFormat: 'H:i:s'
    	},
    	{
    		type: 'Numeric',
    		grid: {
    			odd: {
    				fill: '#f3f3f3',
    				stroke: '#ddd',
    				'stroke-width': 0.1
    			}
    		},
    		decimals: 0,
    		maximum: 180,
    		minimum: 0,
    		position: 'left'
    	}
    ],
    series: [
    	{
    		type: 'line',
    		xField: 'Time',
    		yField: 'Data1',
    		showMarkers: false,
    		selectionTolerance: 2,
    		smooth: 2,
    		style: {
    			color: '#ff0000',
    			stroke: '#ff0000',
    			fill: '#ff0000',
    			'stroke-width': 2
    		},
    		tips: {
    		  trackMouse: true,
    		  width: 140,
    		  height: 28,
    		  renderer: function(storeItem, item) {
    			this.setTitle('('+Ext.util.Format.substr(storeItem.get('Time'),11,8)+ ', ' + storeItem.get('Data1') + ')');
    		  }
    		}
    	},
    	{
    		type: 'line',
    		axis: 'left',
    		xField: 'Time',
    		yField: 'Data2',
    		showMarkers: false,
    		selectionTolerance: 2,
    		smooth: 2,
    		style: {
    			color: '#0000ff',
    			stroke: '#0000ff',
    			fill: '#0000ff',
    			'stroke-width': 2
    		},
    		tips: {
    		  trackMouse: true,
    		  width: 140,
    		  height: 28,
    		  renderer: function(storeItem, item) {
    			this.setTitle('('+Ext.util.Format.substr(storeItem.get('Time'),11,8)+ ', ' + storeItem.get('Data2') + ')');
    		  }
    		}
    	}
    ]

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    With all of the activity going on in your store.load(), I would suspect this is racing issue where things are not ready.

Tags for this Thread

Posting Permissions

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