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.
Google Charts on Sencha Touch?
Reply With Quote