1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    Reykjavík, Iceland
    Posts
    1
    Vote Rating
    0
    koalas_ is on a distinguished road

      0  

    Default Google Charts on Sencha Touch?

    Google Charts on Sencha Touch?


    I've been fighting trying to pull a google chart into my Sencha Touch app for days, and I'm still not even sure if it's possible...

    The type of chart that I've been trying to create is a candlestick chart

    http://code.google.com/apis/chart/in...tickchart.html

    And the most relevant help I've been able to come across so far (although not touch specific) is this..

    http://www.sencha.com/blog/ext-chart...visualizations

    I'm open to other charting options, but I haven't seen anything else usable that produces a candlestick.

    Any advice?

  2. #2
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Currently@Home

    Currently@Home


    This is just for you.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>
          Google Visualization API Sample
        </title>
        <!-- Sencha Touch CSS -->
        <link rel="stylesheet" href="sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
    
        <!-- Sencha Touch JS -->
        <script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch-debug.js"></script>
    
        <!-- src -->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load('visualization', '1', {packages: ['corechart']});
        </script>
        <script type="text/javascript">
        Ext.setup({
            tabletStartupScreen: 'tablet_startup.png',
            phoneStartupScreen: 'phone_startup.png',
            icon: 'icon.png',
            glossOnIcon: false,
            onReady: function() {
                var timeline = new Ext.TabPanel({
                    title: 'Chart',
                    fullscreen:true,
                    layout:'fit',
                    items: [
                        new Ext.Panel({
                            id:'visualization',
                            title:'chart',
                            iconCls:'info',
                            style:'width: 300px; height: 300px;'
                        }),
                        new Ext.Panel({
                            title:'Other',
                            iconCls:'info',
                            html:'Other Panel'
                        })
                    ]
                });
                //console.log(Ext.getCmp('visualization'));
                // Draw the chart.
                var chart = new google.visualization.CandlestickChart(Ext.getCmp('visualization').getEl().dom);
                var dataTable = google.visualization.arrayToDataTable([
                   ['Mon',20,28,38,45],
                   ['Tues',31,38,55,66],
                   ['Wed',50,55,77,80],
                   ['Thurs',50,77,66,77],
                   ['Fri',15,66,22,68]
                 ], true);
                chart.draw(dataTable, {legend:'none'});
            }
        });
        </script>
      </head>
      <body style="font-family: Arial;border: 0 none;">
      </body>
    </html>
    Please remember to view in Chrome or Safari or on a supported mobile device. This is sencha touch.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    carlos.morales.duran is on a distinguished road

      0  

    Default Sencha 2.x with Google Visualization

    Sencha 2.x with Google Visualization


    Are there any guidelines and/or code examples showing how to integrate a Sencha Touch 2.x application with the Google Visualization JavaScript API?

    Thanks,

    Carlos

  4. #4
    Sencha User
    Join Date
    Sep 2013
    Posts
    14
    Vote Rating
    0
    akshayprabhu is on a distinguished road

      0  

    Default


    I integrated the Google ORG chart with Sencha Touch 2.2.1.
    It was pretty easy.

    However I am not sure if we can club the Data using Sencha Touch Stores and Model.
    I was forced to use Google Charts API's DataTable for the same.
    Has anyone used an Adapter for Google Charts and then used it in Sencha Touch.?