Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

sencha touch and charts

Has anyone been able to incorporate Charts and graphs into Sencha Touch?

If so, an example would be appreciated.

Thanks

like image 360
femi Avatar asked Oct 18 '10 11:10

femi


3 Answers

Sencha Touch Charts has just been released

like image 93
angryITguy Avatar answered Dec 31 '22 19:12

angryITguy


I was under the impression that Raphael (http://raphaeljs.com/) would eventually be incorporated into Sencha Touch for its' graphing component (http://g.raphaeljs.com/). Until then, you can pretty easily just include the extra Raphael .js files and make graphs that way. Something like:

<script src="sencha-touch-1.0/sencha-touch-debug.js" type="text/javascript" charset="utf-8"></script>

<!-- Raphael JS -->
<script src="raphael/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.pie-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.line-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.bar-min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    Ext.setup({
        onReady: function() 
        {
            // Set up main panel!
            var tabPanel = new Ext.Panel
            ({
                fullscreen: true,
                html: '<div id="graph"></div>'
            });

            // Try to draw a graph!
            var r = Raphael('graph');
            r.g.txtattr.font = '12px Helvetica, Arial, sans-serif';
            r.g.text(150, 250, "Demo chart with title");
            r.g.linechart(10, 10, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], {nostroke: false, axis: "0 0 1 1", symbol: "o", smooth: true});

        }
    });
</script>
like image 44
endemic Avatar answered Dec 31 '22 17:12

endemic


Take a look at http://code.google.com/p/oppo-touching/. Someone already moved charting to Snecha Touch. Also there is news that next version of Sencha Touch will include charting.

like image 31
Huang Avatar answered Dec 31 '22 18:12

Huang