Jump to content
Mark
 Share


4.0: Charts & Graphs

Charts and graphs are an essential tool in modern web applications. The API we use for displaying charts and graphs in IP.Board presently is something we wrote in-house during IP.Board 2.x - it uses the PHP GD library to generate an image representing a chart. At the time, it was pretty amazing, but as times have changed a number of libraries for generating much more visually appealing and interactive graphs have emerged. For IPS Social Suite 4.0 we've decided to retire our GD-based charting library and embrace something a bit more modern and familiar for developers to work with.

After looking at a number of different solutions, we decided to use Google Charts (although wrapped with a simple gateway PHP class). Google Charts look great, have great features, are commonly used (so we figure any third-party developers who want to add charts to their apps will be able to do so easily) and is a service provided for free with no API limitations.


I'll show you an example of how simple it is to create a chart in IPS Social Suite 4.0. Let's look at the code I might use to show a graph of the number of members registered over time:

		/* Init Chart */
		$chart = new IPSHelpersChart;
		
		/* Specify headers */
		$chart->addHeader( "Date", 'date' );
		$chart->addHeader( "Members", 'number' );
		
		/* Add Rows */
		$stmt = IPSDb::i()->build( array(
			'select'	=> "COUNT(*) AS count, DATE_FORMAT( FROM_UNIXTIME( joined ), '%Y-%m-%d' ) as joined_date",
			'from'		=> 'core_members',
			'group'		=> 'joined_date',
			'order'		=> 'joined DESC',
		) );
		$stmt->execute();
		while ( $row = $stmt->fetch() )
		{
			$chart->addRow( array( new IPSDateTime( $row['joined_date'] ), $row['count'] ) );
		}
		
		/* Output */
		IPSOutput::i()->output = $chart->render( 'LineChart', array(
			'title'	=> "Registrations",
		) );


As you can see, the code is extremely simple to understand and use. This is what the output looks like:

By hovering over any point I'll see a tooltip with the value at that point.

All of the chart types and options available in Google Charts are available to us. Let's make some changes to make the lines curved, get rid of the legend and show titles on each axis - I just change the last line of the code to:

		IPSOutput::i()->output = $chart->render( 'LineChart', array(
			'curveType' => 'function',
			'hAxis' => array(
				'title' => 'Date',
			),
			'legend' => array(
				'position' => 'none',
			),
			'title'	=> "Registrations",
			'vAxis' => array(
				'title' => 'Number of registrations',
			)
		) );


And now my chart looks like this:

 Share

Comments

Recommended Comments



What a waste of time and effort, don't see the need for this at all.

Said who? I like graphs.

 

 

  • graph new registrations (validating + new members)
  • graph completed registrations (new members)
  • all posts per day/week/month
  • all entries per day/week/month
  • all photos per day/week/month
  • posts by desired member
  • all comments in blog/gallery

etc

Link to comment
Share on other sites

 

We'd have to up the license price by $90 ;)

 

 

OR, you could see a OED license as a great investment for the bright IPB4 future^^

 

 

As long as we have a php wrapper and you find alternatives once google stopps the service or too many clients complain, that it's not working, i don't care:)

Link to comment
Share on other sites

 

We'd have to up the license price by $90 ;)

 

Ah, I was going to mention that you used Highslide for the gallery lightbox.. but Highslide seems to be the only one that offers an unlimited domain license. That kinda sucks then.

 

Well, out of curiosity, did you ever consider jqPlot? :P

 

It's free and open source.

Link to comment
Share on other sites

You realize no matter which library we picked someone would come along and say "but my favorite is ____" right? ;)

 

Yes, we looked at probably a half dozen or so libraries before settling on Google Charts, but as mentioned it is abstracted loosely through a PHP class so that the charting framework could be swapped out by anyone who desired to do so (or by us, if we found a need).

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...