PHP Dashboards – Create Custom Dashboards – Totally Free

How to create Dashboards for Free?

So you are looking for options to build dashboards?

Ingredients : Apache + PHP + MySQL + Free Charting Engine

Cost : $0

Time : Tons of it (just kidding)

Previously, we did a detailed analysis of various methods of creating dashboards. We had to categorize the different methods as Type – 1 , Type – 2 , Type – 3 and super ubiquitous ‘Excel Method’ which is Type – 4

Today we are going to discuss a dashboard building process which suits any economic conditions. Thats right, you won’t need to spend a single dollar on any software.

This method belongs to the “Type – 1” method which means you will need a lot of coding skills in php,html, and javascript.

There are lot of charting vendors who sell Java, .net and Flash chart components. Most of them are commercial and there are few good open source and free options. We are going to consider the Open Source Flash Charting Engine for this tutorial.

Flash charts are simply beautiful and having a free price tag is just awesome.

Image

 

Image

 

Download, install and Testing

Download and install is just the act of unzipping the files and placing them on the webserver

Before we can start you should have downloaded the Open Flash Chart .zip file.

Open the .zip file and copy the open-flash-chart.swf to the root folder of your web server.

You can move all the files to wherever you want on your webserver, but for this tutorial lets keep everything nice and simple. When you finish the tutorial and have a working example, then move the files to a better location. If anything stops working, you know what file you moved and so should be able to fix the paths.

So, once you have open-flash-chart.swf in the root directory of your web server, copy the folder ofc-library to the root directory. Set the permissions of this folder and the .php files inside it so they will run correctly.

Connecting to database, get data and render as chart

This particular piece of code demonstrates just how to do this

<?php

// What you will probably do is:
/*

if( isset( $_GET[‘id’] ) )
{
$user = intval( $_GET[‘id’] );
$sql = ‘SELECT * FROM results WHERE fk_user=’.$user;
}

*/

// I don’t have any tables set up, so I
// simulate getting data from the database.
// This SQL will get the DB to produce a
// nice sin wave:
$t = array();
for( $i=0; $i<(4*3.14); $i+=0.3)
$t[] = ‘select sin(‘. $i .’)’;

$sql = implode( ‘ union ‘, $t );

//
// This opens the db connection as usual:
//
// $db = mysql_connect(“localhost”, “user”,”***”) or die(“Could not connect”);
// mysql_select_db(“database”,$db) or die(“Could not select database”);
//
// Uncomment the above lines and fill in the db, user name and password, then
// delete the following two lines:
//
include_once( ‘includes/db.php’ );
$db = openDataBase( );
//
//

$data = array();
$res = mysql_query($sql,$db) or die(“Bad SQL 1”);
while( $row = mysql_fetch_array($res) )
{
$data[] = floatval( $row[0] ) + 1.5;
}

// use the chart class to build the chart:
include_once( ‘ofc-library/open-flash-chart.php’ );
$g = new graph();
$g->title( ‘Sin + 1.5’, ‘{font-size: 12px;}’ );

$g->set_data( $data );
$g->set_y_max( 3 );
$g->y_label_steps( 3 );

// display the data
echo $g->render();
?>

We are not going to replicate the tutorial here as the author has done a wonderful job of not just providing the charts for free but also complement it with a variety of tutorials.

The flash engine has lot of chart types but could be a disappointment for those who are looking for eye-candy gauges. But don’t worry, we have a fix for them as well. For Flash Gauges, try the open source gauge charts

Image

Well, that covers the our first method of creating dashboards, which is one of the complicated and very involved method, hey but its Free!

One last thing, while we are at the topic, this is something related to Flash Google Analytics Tracking For Adobe Flash