PHP Dashboard an Open Source HTML5 Dashboard

Create your first PHP Dashboard with Dashboard Builder

PHP Dashboard an Open Source HTML5 Dashboard. Create your first PHP Dashboard with Dashboard Builder an Open Source HTML5 Dashboard a PHP based dashboard application built in Apache + PHP + MySQL + Free Charting Engine, which is designed with simplicity and ease-of-use at top of the mind which is customizable in a number of ways. It supports a variety of different charts, and can be used to create either static or real-time dashboards with data coming from a variety of sources such as MySQL, MS SQL, SQLite, ORACLE, PostgreSQL, Sybase and Cubrid with no programming skills. A part of the community, Dashboard Builder is designed to integrate with a PHP application you may already be using.

Figuring out how to best visualize your data can be challenging. Maybe you started out by creating a few graphs in a spreadsheet and are trying to find a way to tie them all together. Or maybe you're working with an existing analytics tool and want to find a way to make your data more accessible to a wider audience. Or perhaps you've gone several real-time sources and are trying to find a way to tie them all together.

Fortunately, there is a PHP based Open Source HTML5 Dashboard Builder is available that make the job much easier. On one end of the spectrum are community application, like BIRT or Pentaho. But for a smaller project, tools like these could be overkill, and in some cases, you might be able to find a dashboard tool that is already designed to work with the kind of data you are dealing with.

 

Requirements

  • PHP Version 5.6 or later
  • Apache 2 or later
  • Windows 7 or later /Linux 3 or later
  • Firefox 52, Chrome 57, IE 8

 

Installation

 

Create your first Dashboard

 

 

 

  • Following screen will appear. Select Database from data source tab. Select SQLite from the drop down list of Database, Enter your "../data/Northwind.db" in the DB name field and Save changes    as mentioned in the screen.

 

 

 

  • A green tick mark with Database  will appear when your database is successfully connected.

 

 

  • Select the gear icon for your Chart preference.

 

 

  • The following screen will appear. List of the tables will appear.

 

 

  • Enter your SQL statement in text box, SQL field as the following manner

SELECT strftime('%Y-%m',o.shippeddate) as xaxis, sum(d.quantity) as yaxis from `order details` d, orders o where o.orderid = d.orderid group by strftime('%Y-%m',o.orderdate) limit 50

  • Click the Run Query button

 

  • Query Result will appear. Now Select your x-axis data from the drop down list of   and y-axis data from the drop down list of Y .
  • Click Save Changes

 

 

  • Charts will be appeared on the screen as shown below.

 

 

  • You may adjust the size and the position of the Chart Panel by dragging its corner.

  • Now Click the Generate   button

 

 

  • PHP code for the chart will automatically generate, you may copy past this code to your PHP application.

 

PHP Code


/**
 * DashboardBuilder
 *
 * @author Diginix Technologies www.diginixtech.com
 * Support  - http://www.dashboardbuilder.net
 * @copyright (C) 2018 Dashboardbuilder.net
 * @version 2.1.5
 * @license: license.txt
 */

include("inc/dashboard_dist.php");  // copy this file to inc folder 


// for chart #1
$data = new dashboardbuilder(); 
$data->type =  "line";

$data->source =  "Database"; 
$data->rdbms =  "sqlite"; 
$data->servername =  "";
$data->username =  "";
$data->password =  "";
$data->dbname =  "data\Northwind.db";
$data->xaxisSQL[0]=  "SELECT strftime(^%Y-%m^,o.shippeddate) as xaxis, sum(d.quantity) as yaxis from `order details` d, orders o  where o.orderid = d.orderid group by strftime(^%Y-%m^,o.orderdate) limit 50";
$data->xaxisCol[0]=  "xaxis";
$data->yaxisSQL[0]=  "SELECT strftime(^%Y-%m^,o.shippeddate) as xaxis, sum(d.quantity) as yaxis from `order details` d, orders o  where o.orderid = d.orderid group by strftime(^%Y-%m^,o.orderdate) limit 50";
$data->yaxisCol[0]=  "yaxis";
$data->name = "linechart";
$data->title = "Line Chart";
$data->orientation = "";
$data->xaxistitle = "x-axis title";
$data->yaxistitle = "y-axis title";
$data->showgrid = "";
$data->showline = "";
$data->height = "167";
$data->width = "";
$data->col = "0";
$result[0] = $data->result();

?>

<!DOCTYPE html>
<html> 
<head> 
	<script src="assets/js/dashboard.min.js"></script> <!-- copy this file to assets/js folder --> 
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Bootstrap CSS file, change the path accordingly --> 

<style>
@media screen and (min-width: 960px) {
.id0 {position:absolute;margin-top:67px;}

}
.panel-heading {line-height:0.7em;}
#kpi {font-size:34px; font-weight:bold;text-align:center;}
#kpi_legand {font-size:11px; color:#999;text-align:center;}
</style>


</head>
<body> 

<div class="container-fluid main-container">
<div class="col-md-12 col-lg-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-xs-12 id0">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
    <div class="panel-body">
        <?php echo $result[0];?>
    </div>
</div>
</div>
</div>
</div>
</div>
</body>

<script>
	Plotly.relayout("col0", {height:167});
</script>

 



Learn from video

 

The project also offers free and paid plans. The code for Dashboard Builder can be found on GitHub under this license