March 5, 2009
Creating Line Graphs on the iPhone
I have finally been able to complete the line graphs(charts) portion of the Charting and Graphing QuickConnect library and am working on getting a final bug out of the Bar and Pie charts.
I plan on producing a video on how these are used and how to create them in your code but thought that a quick view of what is coming in V 1.5 beta 2 would be of interest.
I have put a few images here for you to see. The first is a line graph showing two separate data series being displayed. If you touch the data points, either directly or by moving your finger over them, the value and description of the point is displayed in the display area of the chart. You can also cycle through the values of a series by using the forward and backward arrows or by moving your finger across the color display bar.
The next image is of the same data but drawn as a filled line chart.
If you touch any of the data points the series that contains that value is brought to the front as you can see in this next image.
I have tried to make this as easy to use as I can. Here is the code to create the filled chart.
var fill = false;
var shadow = true;
lineDisplay.chart = new QCLineChart(document.getElementById(‘lineChartDisplay’), ‘Animals’, shadow, fill);
lineDisplay.chart.addSeries(‘Some Animals’,[[‘cats’,15], [‘hipos’,2], [‘fish’,7], [‘dogs’,4]
, [‘bears’,20], [‘mice’,3], [‘elephants’,7], [‘dogs’,10], [‘kangaroo’,18]]);
lineDisplay.chart.addSeries(‘Other Animals’,[[‘gorillas’,10], [‘snakes’,5], [‘robins’,3],[‘rats’,4], [‘moose’,15], [‘deer’,14], [‘tigers’,0 ], [‘jaguar’,9], [’emu’,9]]);
To change it to a standard non-filled chart just change the fill variable to false.