Bagaimana Menggunakan Touch Charts? | Mobile Application Developer

Touch Chart adalah salah satu produk Sencha. Touch Charts, meskipun terpisah dengan Sencha Touch, tetapi framework ini sangat berhubungan dengan Sencha Touch. Touch Chart adalah framework yang memudahkan kita membuat Chart (atau mudahnya diagram) yang berjalan baik di perangkat mobile (baik tablet maupun ponsel) yang mendukung HTML5. Saat ini saya sudah mencoba coding Touch Charts, sudah saya test dengan ponsel saya (low end Android, Samsung Galaxy Young) dan hasilnya sangat memuaskan. Grafik tampil dengan sangat baik dan animasi mulus.

Anda bisa mencoba aplikasi sederhana saya, hanya untuk menunjukkan bagaimana framework ini bekerja. Silakan kunjungi

http://webapps.durianapp.com/touchchartexample/

atau

http://durianapp.com/webapps/touchchartexample/.

Jika Anda menggunakan desktop, saat ini sepertinya baru Safari dan Google Chrome yang bisa menampilkan contoh ini dengan baik (terkait dengan dukungan HTML5). Anda bisa menggunakan browser handphone Android atau iPhone untuk mencoba contoh ini.

Di bawah saya lampirkan source code yang saya gunakan. Hanya 2 file: index.html dan chart.js. Sangat sederhana.

// 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']
                }]
            }
        });
	}
});

            view raw
            chart.js
            This Gist brought to you by GitHub.
          

    <!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>

            view raw
            index.html
            This Gist brought to you by GitHub.
          

November 16, 2011

Posted in Snippet, Tutorial and tagged sencha, touch charts.

2 responses to Bagaimana Menggunakan Touch Charts?

Didik Wicaksono said:

November 21, 2011

Wah, asyik juga nih diterapkan di webapps saya

Reply
- amrishodiq said:
  
  November 21, 2011
  
  Iya dong, pake. Bagus kok, saya dah coba di Android lancar. Untuk Blackberry, sepertinya baru Torch dan seri 9xxx yang jalan.
  
  Reply

2 responses to Bagaimana Menggunakan Touch Charts?

Leave a Reply Cancel reply