Example of using Touch Charts's Column Chart

chart.js

// This sample is based on given example by Sencha,
// http://dev.sencha.com/deploy/touch-charts-rc/examples/Column/
// I simplify it so I hope this example is easier to read by newbies

Ext.setup({
	onReady: function() {

        // store untuk menyimpan data
        window.store1 = new Ext.data.JsonStore({
            fields: ['name', 'data1', 'data2'],
            data: [{
            	name: 'Jan',
            	data1: 24,
            	data2: 60
            }, {
            	name: 'Feb',
            	data1: 20,
            	data2: 70
            }, {
            	name: 'Mar',
            	data1: 33,
            	data2: 90
            }, {
            	name: 'Apr',
            	data1: 20,
            	data2: 30
            }, {
            	name: 'May',
            	data1: 88,
            	data2: 40
            }]
        });

		// perhatikan properti gradient dari items milik panel
        var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];

		// fungsi handler untuk button help
        var onHelpTap = function() {
			new Ext.Panel({
 		          floating: true,
		           modal: true,
		           centered: true,
		           width: 300,
		           height: 250,
		           styleHtmlContent: true,
		           scroll: 'vertical',
		           dockedItems: [{ // untuk menampilkan title bar
		               dock: 'top',
		               xtype: 'toolbar',
		               title: 'Column Chart'
		           }],
		           stopMaskTapEvent: false,
		           fullscreen: false,
				   html: "Contoh ini menampilkan penggunaan sederhana Sencha Touch Charts.<br>" +
							"Bar-nya bisa diberi warna gradien, selain itu chart bisa di zoom " +
							"dengan cara pinch. Perhatikan tombol di bawah yg menunjukkan state " +
							"zoom atau fixed."
		       }).show('pop'); // menampilkan popup screen
		}

		// membuat object Panel
        new Ext.chart.Panel({
            fullscreen: true,
            title: 'Contoh Column Chart',
            dockedItems: [{
                xtype: 'button',
                iconCls: 'help',
                iconMask: true,
                ui: 'plain',
                handler: onHelpTap
            }],
            items: {
                cls: 'column1',
                //theme: 'Demo',
                animate: {
                    easing: 'bounceOut',
                    duration: 750
                },
                store: store1,
                shadow: false,
                gradients: [{
                    'id': 'v-1',
                    'angle': 0,
                    stops: {
                        0: { // 0 for top
                            color: 'rgb(212, 40, 40)'
                        },
                        100: { // 100 for bottom
                            color: 'rgb(117, 14, 14)'
                        }
                    }
                },
                {
                    'id': 'v-2',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(180, 216, 42)'
                        },
                        100: {
                            color: 'rgb(94, 114, 13)'
                        }
                    }
                },
                {
                    'id': 'v-3',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(43, 221, 115)'
                        },
                        100: {
                            color: 'rgb(14, 117, 56)'
                        }
                    }
                },
                {
                    'id': 'v-4',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(45, 117, 226)'
                        },
                        100: {
                            color: 'rgb(14, 56, 117)'
                        }
                    }
                },
                {
                    'id': 'v-5',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(187, 45, 222)'
                        },
                        100: {
                            color: 'rgb(85, 10, 103)'
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    minimum: 0,
                    maximum: 100,
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Number of Hits'
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    renderer: function(sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = colors[i % colors.length];
                        return barAttr;
                    },
                    label: {
                      field: 'data1'
                    },
                    xField: 'name',
                    yField: 'data1'
                }],
                interactions: [{
                    type: 'panzoom',
                    axes: ['bottom']
                }]
            }
        });
	}
});

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
        <link rel="stylesheet" href="http://dev.sencha.com/deploy/touch-charts-rc/resources/css/touch-charts-demo.css" type="text/css">

        <title>Touch Chart Example</title>
        <script type="text/javascript" src="http://dev.sencha.com/deploy/touch-charts-rc/sencha-touch.js"></script>
        <script type="text/javascript" src="http://dev.sencha.com/deploy/touch-charts-rc/touch-charts.js"></script>
        <script type="text/javascript" src="chart.js"></script>
    </head>
    <body></body>
    </html>