Results 1 to 5 of 5

Thread: Google Charts on Sencha Touch?

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    Reykjavk, Iceland
    Posts
    1
    Vote Rating
    0
      0  

    Default 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
      0  

    Default 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
      0  

    Default 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
      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.?

  5. #5
    Sencha User
    Join Date
    Oct 2014
    Posts
    1
    Vote Rating
    0
      0  

    Default How to integrate Google ORG chart with Sencha Touch 2.2.1

    Hello Akshayprabhu,

    I am trying to integrate the charts into sencha touch app, which is build using sencha 2.2.1 version. Can you please describe how did you integrate Google ORG chart with Sencha Touch 2.2.1?

    Any tutorial link and/or code example will be more helpful.

    Thanks in advance,
    Shiva

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •