Results 1 to 5 of 5

Thread: Google Charts on Sencha Touch?

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Reykjavk, Iceland

    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

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

    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
    Orange County, CA, USA

    Default [email protected]

    This is just for you.
    <html xmlns="">
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
          Google Visualization API Sample
        <!-- 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=""></script>
        <script type="text/javascript">
          google.load('visualization', '1', {packages: ['corechart']});
        <script type="text/javascript">
            tabletStartupScreen: 'tablet_startup.png',
            phoneStartupScreen: 'phone_startup.png',
            icon: 'icon.png',
            glossOnIcon: false,
            onReady: function() {
                var timeline = new Ext.TabPanel({
                    title: 'Chart',
                    items: [
                        new Ext.Panel({
                            style:'width: 300px; height: 300px;'
                        new Ext.Panel({
                            html:'Other Panel'
                // Draw the chart.
                var chart = new google.visualization.CandlestickChart(Ext.getCmp('visualization').getEl().dom);
                var dataTable = google.visualization.arrayToDataTable([
                 ], true);
                chart.draw(dataTable, {legend:'none'});
      <body style="font-family: Arial;border: 0 none;">
    Please remember to view in Chrome or Safari or on a supported mobile device. This is sencha touch.

  3. #3

    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?



  4. #4


    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

    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,

Posting Permissions

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