Whilst designing a new layout for one of my current projects, I wanted to be able to provide the end user with the ability to quickly scan over a series of statistics.
The main page should act as overview of everything that is going on, therefore I wanted to avoid overcrowding it with lots of large graphs and instead simply show the basic trends.
A few months back I came across an implementation of Sparklines – data-intense, design-simple, word-sized graphics – which are often used to demonstrate stock market activity in a simple visual graphic.
I was just going to use a pre-made script from the many already available, but instead decided to knock one up myself and created a small PHP Class to generate and output a sparkline image using the GD Library.
To create a sparkline I can now simply include the class and then initiate it in a variation of the following:
$sparkline = new Sparkline(); $sparkline->data = Array(3,38,2,8, ... ,38,13,4,23); $sparkline->output(); // Display image
This PNG image is generated and output to the browser:
A number of other setup options are available to customise the output further:
$sparkline->bg = '#000000'; // Background colour
$sparkline->width = 150;
$sparkline->height = 50;
$sparkline->line = '#336699'; // Line colour
$sparkline->points = '#333333'; // Start & end points
$sparkline->thickness = 2; // Line thickness
$sparkline->scale = 5; // Anti-aliasing scale size
$sparkline->output('saved/test.png', true); // Save to location and display
All colours must be provided in hexadecimal format and if you are attempting to save the image the destination location must be writeable by Apache.
The Sparkline PHP Class source code is available for anyone to use as they may like, although I must confess it hasn’t been fully tested as yet!
Stv.Whtly 