PDA

View Full Version : Google Charts on Sencha Touch?



koalas_
5 Jul 2011, 1:58 PM
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/interactive/docs/gallery/candlestickchart.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-charting-and-mapping-with-google-visualizations

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

Any advice?

Jack9
5 Jul 2011, 7:10 PM
This is just for you. ~o)


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

carlos.morales.duran
17 May 2012, 3:27 AM
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

akshayprabhu
3 Oct 2013, 11:41 AM
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.?

Shivu.darur
29 Oct 2014, 4:04 AM
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