March 5, 2009

Creating Line Graphs on the iPhone

Posted in Uncategorized tagged , , , , , , , , , , at 11:49 pm by tetontech

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.

A two series line chart

A two series line chart

The next image is of the same data but drawn as a filled line chart.

A two data series filled line chart

A two data series 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.

A two series filled line chart showing the second series in front.

A two series filled line chart showing the second series in front.

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.



  1. sam said,

    Wahoo, this looks really great !
    Is is javascript only (so cross plateform), or is it using native code ?

    • tetontech said,

      It is JavaScript and uses the HTML 5 canvas tag in WebKit so it should be able to be used across all of the QuickConnectFamily frameworks. I haven’t tried it on something like Firefox, but this is a mobile device charting utility so I haven’t worried about that or IE.

  2. MaxR said,

    How can you make the line chart show real time data on iPhone? The line chart should move left when the new data has to b displayed. Something like stock-value chart..

    • tetontech said,

      You could clear and then redraw the chart in the canvas.

  3. saravanan said,

    How to implement a Dashboard in iPhone native application?

  4. srinivas said,

    very nice.

    i want full coding of these line graph and bar graph.

    can u send it to my mail id

    • tetontech said,

      What email address? Also, you could download the QC installer and get the code from there.

  5. superdeveloper said,

    please send me the complete coding for bar graph and line graph.

  6. superdeveloper said,

    my website address

  7. cdor said,

    Is the UIWebView the only way of using this?
    Thank you!

    • tetontech said,

      Yes at this time. I have started doing some work along these lines natively but have no timeframe for delivery.

  8. JoshuaHoward said,

    i really need this,
    please send me the complete coding for bar graph and line graph, I really appreciate it..

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: