Sparklines: a how-to guide.

Monday 8 February 2010, 2:42PM

Edit: yes I know the code isn’t perfect. I’ll further optimize and clean everything up once I’m on that stage (implementing custom cells and whatnot). :)

Okay, so I’ve already gotten six… now seven requests on how I did those sparklines. The secret: I didn’t. Google is my best friend (Github a close second). The iPhone developer community is so darn awesome that most little utilities are probably available in one form or another.

Here’s the code I used to add Sparklines to my table (datalog is just an NSDictionary  containing an array of numbers, which I extract to sparklinedatapoints):

NSMutableDictionary *datalog = [self.data objectAtIndex:indexPath.row];

NSMutableArray *sparklinedatapoints = [NSMutableArray arrayWithCapacity:0];

for (int i = 0; i < [[datalog objectForKey:@"datapoints"] count]; i++)

{

[sparklinedatapoints addObject:[[[datalog objectForKey:@"datapoints"] objectAtIndex:i] objectForKey:@”value”]];

}

CKSparkline *sparkline = [[CKSparkline alloc]

initWithFrame:CGRectMake(320-50-30, 10+44*(indexPath.row), 50, 24)];

sparkline.data = sparklinedatapoints;

[self.tableView addSubview:sparkline];

[sparkline release];

Huh? Where’s the rest of the code? Oh, it’s all available for download here. All you need is the above code and a #import statement and you should be good to go!

  • jeremybrooks
    Nice. That's going to look great in the finished app.
  • Janusz
    Using UITableView is not an easy task. If you want to have decent performance I wouldn't suggest doing it the way you did it.

    The best way is to create rows as images and add those images to the tableview. The performance can get very laggy when you have a lot of views in a cell.
  • Chris
    I'm sorry, could you either give a code snippet or some pseudo-code explaining how to improve performance? I am confused by what you mean with "create rows as images".

    Thanks
  • slavingia
    A blog post about this is coming.
  • Janusz
    Let's assume that you want to display a lot of info in one row i.e.: image on the left, some text next to it, a graph on the right. Also it's nice when rows have gradient backgrounds which means all the text/image views have to be transparent and there's a lot of compositing.

    The easy way to do this is to design the row layout in Interface Builder and have a lot of views (background + icon + text + graph = 5 views for each row). When you multiply that by the number of rows there are on the screen you'll probably get to about 50 views which have to be animated when user scrolls the list (60 fps would be superb). That's a lot of work.

    What you should do instead is:
    Create a row template that has only one view - the background view. Do all the compositing of the views described in previous paragraph and create an NSImage representing all those views (not at once ofcourse ;)) then just add those NSImages to the Table View and you're done. This is really easy and if you google some UITableView performance tips you should find the source code for that. It's easy to do this when you have one table view in your app. If you have many of them you should implement something generic that would work on all the table views (not only in this project).

    If I recall correctly the guy who created Tweetie has a good article about this on his blog but I'm not sure.

    I hope I was helpful :) If you have any further questions email me at janusz[dot]bossy[at]gmail[dot]com
  • slavingia
    Yup I use this method in Twizzle and Color Stream, and it'll for-sure
    be in Dayta. :)
  • Janusz
    I've found the link to tweetie's blog
    http://news.atebits.com/post/197580827/fast-scrolling-in-tweetie-with-uitableview

    This is where I learned the "trick" :)
  • Chris
    cheers! very helpful
  • slavingia
    Yup, I'm definitely going to draw the cells once I make the cells all
    nice and pretty. But for now they're fine. :)
  • wow thanks !
  • Terrific .. thanks for sharing!
blog comments powered by Disqus