Creating Dashboard with Charts 4 PHP

Creating Dashboard  with Charts 4 PHP

This article will show how to create a dashboard using Charts 4 PHP Framework with or without database (mySQL, Oracle, PDO etc.) at back end.

I. Creating first chart in Dashboard

Step 1: Configure Database connectivity in config.php


Step 2: Include Charts 4 PHP Library in Dashboard HTML

$p = new chartphp();

Step 3: Select any one of the substep below to configure Data Array

Step 3a: Configure Data array

$p->data = array(array(
array('Heavy Industry', 12),
array('Retail', 9), 
array('Light Industry', 14), 
array('Out of home', 16),
array('Commuting', 7), 
array('Orientation', 9)));

Step 3b: Configure Data array using jQuery to fetch data from Database (e.g. for SQLite DB)

$p->data_sql = "select c.categoryname, sum(a.UnitPrice * a.Quantity) as Sales
                from products b, `order details` a, categories c 
                where a.productid = b.productid and c.categoryid = b.categoryid
                    group by c.categoryid 
                    order by c.categoryid";

Step 4: Set Chart type

$p->chart_type = "pie";

Step 5: Render Chart

$out = $p->render("c1");

This will give you a single chart in your dashboard something like this.

Single Chart Dashboard Sample

II. Creating multiple charts in your Dashboard

Step 1: Configure multiple charts into your Dashboard HTML

$p = new chartphp();
$p->data = array(array(array("2010/10",48.25),array("2011/01",238.75),array("2011/02",95.50),array("2011/03",300.50),array("2011/04",286.80),array("2011/05",400)));
$p->chart_type = "bar";
$out_bar = $p->render('c2');

$p = new chartphp();
$p->data = array(array(array(60, 123, 1067, "Acura"), array(11, 92, 1236, "Alfa Romeo"), array(30, 200, 610, "AM General"), array(50, 23, 800, "Aston"), array(18, 17, 539, "Audi"), array(50, 89, 1026, "BMW"), array(99, 13, 864, "Bugatti")));
$p->chart_type = "bubble";
$out_bubble = $p->render('c3'); 

$p = new chartphp();
$p->intervals = array(200,300,400,600);
$p->chart_type = "meter";
$p->width = "200px";
$p->height = "150px";
$p->data = array(array(rand(200,600)));
$out_meter = $p->render('c4'); 
$p->data = array(array(rand(200,600)));
$out_meter2 = $p->render('c41'); 
$p->data = array(array(rand(200,600)));
$out_meter3 = $p->render('c42'); 
$p->data = array(array(rand(200,600)));
$out_meter4 = $p->render('c43'); 

Step 2: Render multiple charts in your dashboard to get the final look like this:



For complete code, please visit live demo.