Chart in Titanium Application for iOS


1. Download ti.Chart module from
https://github.com/appcelerator/titanium_modules.

2. Placed it in titanium Module folder
/Users/sanjaypal/Library/Application Support/Titanium/modules.

3. update ti.XML to add module in Application

ti.charts

4. Require module
var Charts = require(‘ti.charts’);

5. add Function for Chart .

function ResetChart(yAxis,xAxis,yAxisValue,xAxisValue,data,dateArray){
Ti.API.info(yAxis+’ ‘+xAxis);
Ti.API.info(data);
Ti.API.info(dateArray);

var demoChart = Charts.createChart({
top:’15%’,
left:0,
width:(dateArray.length*75)+100,
height:’70%’,
fillColor:’white’,
orientationModes:[
Ti.UI.PORTRAIT,
Ti.UI.UPSIDE_PORTRAIT,
Ti.UI.LANDSCAPE_LEFT,
Ti.UI.LANDSCAPE_RIGHT
],

padding:{
top:0,
left:0,
right:0,
bottom:0
},

// Configure the plot area — the area where the chart is drawn
plotArea:{
borderRadius:5.0,
borderColor:’#48C’,
borderWidth:2.0,
// Configure the inner padding — the area between the plot area frame and the actual plot area
padding:{
top:0.0,
left:48.0,
right:5.0,
bottom:35.0
},

backgroundGradient:{
startColor:’#00F’,
endColor:’#004′,
angle:-45.0
}
},

// Configure the xAxis
xAxis:{
// origin defines where it intercepts the orthogonal axis (the y-axis)
origin:dateArray[0],
lineColor:’yellow’,
lineWidth:1.0,
title:{
text:xAxis,
offset:18.0,
color:’#0f0′,
font:{ fontFamily:’Helvetica’, fontSize:14 }
},
majorTicks:{
color:’red’,
width:1.0,
length:5.0,
//interval:10,
locations:dateArray,

gridLines:{
width:1.0,
color:’blue’,
opacity:0.5,
//range:{ location:0.0, length:100.0 },

},
labels:{
offset:0.0,
angle:0.0,
color:’white’,
font:{ fontFamily:’Helvetica’, fontSize:8 },
textAlign:Charts.ALIGNMENT_CENTER
}
},
minorTicks:{
color:’purple’,
width:1.0,
length:dateArray.length,
count:5,
gridLines:{
width:1.0,
color:’white’,
opacity:0.1
}
},
visibleRange:{ location:0.0, length:100.0 }
},
// Configure the yAxis
yAxis:{
// origin defines where it intercepts the orthogonal axis (the x-axis)
origin:0,
lineColor:’yellow’,
lineWidth:1.0,
title:{
text:yAxis,
offset:24.0,
color:’#0f0′,
font:{ fontFamily:’Helvetica’, fontSize:14 }
},
majorTicks:{
color:’white’,
width:1.0,
length:5.0,
interval:10.0,
gridLines:{
width:1.0,
color:’white’,
opacity:0.2,
range:{ location:0.0, length:100.0 }
},
labels:{
offset:0.0,
angle:45.0,
color:’white’,
font:{ fontFamily:’Helvetica’, fontSize:12 },
textAlign:Charts.ALIGNMENT_MIDDLE
}
},
visibleRange:{ location:0.0, length:100.0 }
},

plotSpace:{
scaleToFit:false,
xRange:{ location:0, length:dateArray.length},
yRange:{ location:0, length:100 }
},
// Enable user interaction — defaults to true
userInteraction:false
});

// Create the line plot
linePlot = demoChart.createLinePlot({
name:’line plot’,
lineColor:’green’,
lineWidth:2.0,
dataClickMargin:12.0,
fillGradient:{
startColor:’#F00′,
endColor:’#0F0′,
angle:90.0
},
fillOpacity:0.5,
// base for area fill: optional, but required if fill specified
fillBase:0.0,
// Note that labels are not defined for the line plot, so no labels are
// displayed above the points along the line
symbol:{
type:Charts.SYMBOL_DIAMOND,
width:10.0,
height:10.0,
lineColor:’red’,
lineWidth:1.0,
fillColor:’green’
},
dataClickMargin:5.0,
data:data//[60,70,80,60]
});
linePlot.addEventListener(‘dataClicked’, function (e) {
Ti.API.info(‘line: ‘ + e.name + ‘ clicked: index: ‘ + e.index + ‘ value: ‘ + e.value);
Ti.API.info(‘x position: ‘ + e.x + ‘ y position: ‘ + e.y);
});

// Add the charts to the window
scrollView.add(demoChart); //
}

6. call chart function

ResetChart(yAxis,xAxis,dataArray,dateArray);

where yAxis——-> is name of y axis.
xAxis——-> is name of x axis.
dataArray——> data for y axis in array like (
[ (40,85,88)
dateArray——> data for y axis in array like (
(
{
text = “August 26, 2013”;
value = 0;
},
{
text = “August 27, 2013”;
value = 1;
},
{
text = “August 27, 2013”;
value = 2;
}
)

iOS Simulator Screen shot Aug 30, 2013 11.34.33 AM

iOS Simulator Screen shot Aug 30, 2013 11.35.48 AM

BEST OF LUCK

Advertisements

2 thoughts on “Chart in Titanium Application for iOS

Add yours

  1. Pingback: MobileDesk

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: