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



Not top of my list ATM, but I can certainly see ways having a functional and straightforward to use charting system could be of great benefit when we get to rebuilding our paid directory system in IPS.  Being able to show directory customers how the traffic changes depending on different options they pay for would be potentially very useful. Esp if we can readily use it in IP.C blocks to show member and/or page specific data.

 

I'm sure there are a ton of other uses, but I'm working on directory issues today, so it's at the top of my awareness. ;)

 

James 

Link to comment
Share on other sites

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

 

Blog entries in this blog are about programatic changes, so unless you're a developer, almost everything we post here will seem pointless. You may be more interested in our main blog where we'll actually be talking about new features :smile:

 

Of course, the clever clogs out there will probably realise that the fact we're spending effort on a decent graphing library might hint towards improved statistical and reporting features throughout the suite :ph34r:

And the really clever ones will realise something like this is hardly any effort as we're using a 3rd party service, but you need a major version like 4.0 to do it.

Link to comment
Share on other sites

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

I think the point is that this is infrastructure.  This is what IPS will be using internally to build the charts and graphs they use in the ACP etc.  It's also going to be available for 3rd party app devs and for power user/advanced admins that might want to build something that uses charts in blocks etc.  This isn't a "feature" that IPS is dumping a bunch of time into, it's a core technology that they are using to build the 4.0 platform and they are letting us know to keep us in the loop about what 4.0 will consist of "under the hood" so to speak.

 

James

Link to comment
Share on other sites

Use it to build things that are only visible to admins?  
Either in the ACP side of an app or by building blocks that are admin viewable only would be my guess at any rate.

 

James

 

My point more so is that it'll be used in the core IPS apps too, so with Nexus you'll sharing financial data with Google servers, not like they're notorious for data mining....

Link to comment
Share on other sites

I know some of you don't have a need for this, but my site will use this feature a ton.  It all depends on what your site is about, so you can't dismiss it.   My question is, how will the users enter the data in for the charts? T here will need to be a wizard of some sort to plot their data.

Link to comment
Share on other sites

With so many APIs out there that are unlikely to be deprecated this century, it's nice to see IPS taking advantage and integrating with more third-party stuff.  

 

With graphs though I hope some good thought is put into choosing *WHICH* graph to use to represent a data.   A smooth curved graph representing visitor signups is about as pointless as you can get.   As much as I love having 7.5 registrations completed..  ;)    Granted, I know this is a demo but so far so good.

 

I only bring this up because of the graphing choices in Nexus, which aren't all that useful for actually using the data.

Link to comment
Share on other sites

 

My point more so is that it'll be used in the core IPS apps too, so with Nexus you'll sharing financial data with Google servers, not like they're notorious for data mining....

 

It doesn't work like that. It's not like a PHP API where you post the data to a third-party server - the code and data are processed and rendered in the browser without data being sent to their server. There are a few theoretical exceptions (for example, if you use a GeoChart and specify the place as "United States", that will get sent to Google to be geo-coded into "US") - naturally such things will be considered when writing any actual feature that are impacted by that, and those circumstances are well documented by Google.

 

The class itself though does support a graceful table-based fallback (which is primarily intended for use if JavaScript is disabled).

 

 

 

Or is this just for developers of hooks?  I was thinking this was for use in forum posts..

 

This blog (as opposed to our main blog) is for talking about underlying code and APIs as opposed to specific features or implementations.

 

 

With so many APIs out there that are unlikely to be deprecated this century, it's nice to see IPS taking advantage and integrating with more third-party stuff.  

 

With graphs though I hope some good thought is put into choosing *WHICH* graph to use to represent a data.   A smooth curved graph representing visitor signups is about as pointless as you can get.   As much as I love having 7.5 registrations completed..  ;)    Granted, I know this is a demo but so far so good.

 

I only bring this up because of the graphing choices in Nexus, which aren't all that useful for actually using the data.

 

Yeah, that's a completely random example which obviously would make any statisticians out there cringe :p

 

Nexus was designed so that you could choose which way you wanted to view the data (depending on how you filtered the results, all the different types may have been appropriate) - it has proved a bit too abstract though, I agree.

Link to comment
Share on other sites

I'm not a developer but I'm pleased to see IPS utilising popular 3rd party software like this. Well done. The existing graphs look so boring, hopefully we'll see some vibrant more exciting charts as a result.

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...