Report Writing – Mobile device reports

Setting up a mobile device report using Sencha touch and/or Sencha touch chart frameworks is similar as setting up a charting report.

In the header, there should be the following:

<link rel=”stylesheet” href=”../extlib/touchcharts/resources/css/touch-charts-demo.css” type=”text/css”>

for styles, and

<script type=”text/javascript” src=”../extlib/touchcharts/sencha-touch.js”></script>
<script type=”text/javascript” src=”../extlib/touchcharts/touch-charts.js”></script>

For mobile-versioned stacked charting reports, there are several variables that need to set, as highlighted:

<script type=”text/javascript”>
tabletStartupScreen: ‘tablet_startup.jpg’,
phoneStartupScreen: ‘phone_startup.jpg’,
tabletIcon: ‘icon-ipad.png’,
phoneIcon: ‘icon-iphone.png’,
glossOnIcon: false,
onReady: function() {
window.store1 = new{
fields: [<?=$labeldata?>],
data: [<?=$seriesdata?>]

//alert(JSON.stringify(generateData(5, 20)));

var onRefreshTap = function() {

var onHelpTap = function() {
new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 250,
styleHtmlContent: true,
scroll: ‘vertical’,
dockedItems: [{
dock: ‘top’,
xtype: ‘toolbar’,
title: ‘Work Order by Crew and Status’
stopMaskTapEvent: false,
fullscreen: false,
html: “<b>Work Order by Crew and Status</b><br>\n\
Try this on iPad and iPhone”

var chartPanel = new Ext.chart.Panel({
title: ‘Work Order by Crew and Status’,
fullscreen: true,
dockedItems: [{
xtype: ‘button’,
iconCls: ‘help’,
iconMask: true,
ui: ‘plain’,
handler: onHelpTap
}, {
xtype: ‘button’,
iconCls: ‘shuffle’,
iconMask: true,
ui: ‘plain’,
handler: onRefreshTap
items: {
cls: ‘bar1’,
theme: ‘Demo’,
store: store1,
animate: true,
shadow: false,
legend: {
position: {
portrait: ‘right’,
landscape: ‘top’
labelFont: ’17px Arial’
interactions: [{
type: ‘reset’
type: ‘panzoom’,
axes: {
left: {}
type: ‘iteminfo’,
gesture: ‘taphold’,
panel: {
dockedItems: [{
dock: ‘top’,
xtype: ‘toolbar’,
title: ‘Details’

html: ‘Testing’
listeners: {
‘show’: function(me, item, panel) {
panel.update(‘<ul><li><b>Crew:</b> ‘ + item.value[0] + ‘</li><li><b>Value: </b> ‘ + item.value[1] + ‘</li></ul>’);
type: ‘itemcompare’,
offset: {
x: -10
listeners: {
‘show’: function(interaction) {
var val1 = interaction.item1.value,
val2 = interaction.item2.value;

chartPanel.descriptionPanel.setTitle(val1[0] + ‘ to ‘ + val2[0] + ‘ : ‘ + Math.round((val2[1] – val1[1]) / val1[1] * 100) + ‘%’);
chartPanel.headerPanel.setActiveItem(1, {
type: ‘slide’,
direction: ‘left’
‘hide’: function() {
chartPanel.headerPanel.setActiveItem(0, {
type: ‘slide’,
direction: ‘right’
axes: [{
type: ‘Numeric’,
position: ‘bottom’,
fields: [<?=$legenddata?>], //wo status
label: {
renderer: function(v) {
return v.toFixed(0);
title: ‘Number of Work Orders’,
minimum: 0
type: ‘Category’,
position: ‘left’,
fields: [‘CREW’],
title: ‘Crews’
series: [{
type: ‘bar’,
stacked: true,
xField: ‘CREW’,
yField: [<?=$legenddata?>], //wo status
axis: ‘bottom’,
highlight: true,
showInLegend: true


Not including the parameters that are set directly, there are:


Series data have to be in the form:

{‘series1′:value1,,’series2′:value2,…., seriesL:valueL,’cluster’:clustername}

where L is the number of series (in this specific example, it is the number of statuses). An example is following:



Legend data have to be in the form:


where N is the number of legends. An example is following:



Label data have to be in the form:


where M is the number of labels along the axis.

An example is given below:


Note: mobile/fac_wo_crew_status.php is in Test as a pilot report.