Some Tips In Optimizing Sencha Touch Chart Application

December 12th, 2012 by aditia rahman / No Comments  

     

Last month I got a project creating mobile application with charting features, since version 2.1 sencha touch provide integrated charting features for mobile application, so far I know sencha touch provide the most complete charting features for mobile application, it is the easiest because it already integrated with other components with the similar coding style, and sencha touch is my choice for this project.

sencha touch chart

Behind it simplicity it came with the implication in performance problem, especially for older android device, cause I have to display more than ten different chart, creating component for each chart display will make your app run slow.

I tested the application on Xperia Neo V (1 Ghz, Single Processor) running on android ice cream sandwich, and it run quite slow, at least this are some tips to increase a performance problem:

1. Make Dynamic Chart

Saving application load time on the startup, with creating chart components on the fly and delete unused chart component, I have already asked this on stackoverflow, other member give me an idea, with store fields, xField, yField. Url became parameters.

createBarChart: function(fields, series_xfield, series_yfield, url) {
    this.getBarchartview().add(new Ext.chart.CartesianChart({
        id: 'barchartgenerateview',
        store: {
            fields: fields,
            proxy: {
                type: 'jsonp',
                url: url
            }
        },
        background: 'white',
        flipXY: true,
        series: [{
            type: 'bar',
            xField: series_xfield,
            yField: series_yfield,
            highlightCfg: {
                strokeStyle: 'red',
                lineWidth: 3
            },
            style: {
                stroke: 'rgb(40,40,40)',
                maxBarWidth: 30
            }
        }],
        axes: [{
            type: 'numeric',
            position: 'bottom',
            fields: series_yfield,
            grid: {
                odd: {
                    fill: '#e8e8e8'
                }
            },
            label: {
                rotate: {
                    degrees: -30
                }
            },
            maxZoom: 1
        },
        {
            type: 'category',
            position: 'left',
            fields: series_xfield,
            maxZoom: 4
        }]
    }));
    Ext.getCmp('barchartgenerateview').getStore().load();
}
2. Limit Chart Data

Displaying more data sure will make your application run slower, specially when you are using interaction, for example you can use top 10 data, one more thing, it better to display data in average range which each value are not too far away.

3. Use Axes Renderer function

When you are displaying long chart data for example $ 1,000,000,000 until $ 55,000,000,000 instead you can display as $ 1 B – $55 B, sure this will saving more space on screen, especially for smartphone screen. The example code are something like this

axes: [
	{
		renderer: function(value) {
			if (type == 'mil') {
				return Math.round((value / 1000000000)) + ' M';
			} else if (type == 'percent') {
				return (Math.floor(value * 100) / 100) + ' %';
			} else if (type == 'value') {
				return value;
			}
		},
		type: 'numeric',
		position: 'left',
		fields: series_yfield,
		grid: {
			odd: {
				fill: '#e8e8e8'
			}
		},
		label: {
                        rotate: {
                            degrees: -30
                        },
			fontSize: 10,
			textAlign: 'right'
		}
	},
	{
		type: 'category',
		position: 'bottom',
		grid: true,
		fields: series_xfield,
		visibleRange: [0.2, 0.4]
	}
]

4. One View For Many Chart (require Ext.chart once)

In sencha touch mvc structure you need to require chart features to creating chart component, usually on views files,

requires: ['Ext.chart.PolarChart', 'Ext.chart.series.Pie', 'Ext.chart.interactions.Rotate'],

Better to have one views with many different chart, one view files for many chart will save application to load the same component over and over again. For example if you have three views with the same chart type, piechart maybe, now you need to add requres Ext.chart.series.Pie three times.

5. Reduce Image & Compress CSS

This point seems like the common optimiztion tips, but when using too much images in my experience sometimes the chart won’t display anything. Understanding and using SASS will help you to optimize sencha touch app better, by removing unused component style and icons, after you are done with your style you can compress it with any CSS compression.

In conclusion sencha touch chart are quite impressive for me to displaying many kind of chart for mobile application, but still hoping some performance improvement especially for android device, cause I found on some forum using to much CSS3 will causing more lags on android.

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment