Dashboard builder

PHP Dashboard tutorial

How to create dashboard in PHP?

Before get started with how to create dynamic dashboard in PHP and connected to the database to fetch the data, we have to make sure that our PHP Server (like Apache, Nginx, etc) is configured to display files in the folder which will contain dashboard. Read-Write permission to the folders and sub-folders of dashboardbuilder i.e chmod -R 777 dashbboardbuilder-v3-FREE. Check your browser inspector/console to make sure that there isn't any error being reported, and all the Dashboard builder files are being loaded properly.

STEP-1: Connect with Dashboard PHP MySQL Database

• Run the web folder in your browser. e.g. http://localhost/dashboardbuilder following welcome screen will appear.

• The screen shows in the above picture is the main panel of the PHP Dashboard. This tool is HTML5 based fully responsive interface built in using the most commonly and widely used PHP, HTML, JavaScript, CSS and a most powerful chart engine. The interface has a minimal design with a drag-and-drop feature that allows users to add multiple unlimited chart panel to customize the dashboard on according to the way they want.
• Now Click the Database icon
• Following screen will appear. In our PHP dashboard example, we will use a sample MySQL database called Northwind.db to connect with PHP MySQL Dashboard and fetch the data. Now, Select Database from data source tab. Select MySQL from the drop down list of Database, Enter your "northwind" in the DB name field and Save changes    as mentioned in the screen.

• When you click the save changes, a green tick mark with Database will appear that shows that your database is successfully connected.

This great PHP dashboard tool gives you the freedom to connect to the diversity source of databases using PDO an acronym for Data Objects and the most consistent way to access databases in PHP application. As stated in the overview, this great Dashboard PHP MySQL Open Source supports all major databases such as MySQL, MS SQL, SQLite, PostgreSQL, Sybase, and Cuboid. But this is not the limit, if you have a data in Excel or in CSV file, this great PHP dashboard also able to fetch data from these sources using the upload sub-tab as shown in the picture above.

STEP-2: Chart settings

• After successfully connect to the database, we will retrieve data from Northwind.db in our next step.
• Select the gear icon.

• A pop-up screen will appear and a list of the tables from Northwind.db will appear on the table list as shown in the picture below.

Our PHP dashboards have a powerful Query Builder, a smart SQL statement builder tool for quick and easy writing of complex SQL queries without manual code writing which is designed to simplify the retrieving of data from the database.

• When you click on the table, a default SQL statement will appear on the SQL statement box, which you may modify as per your need.
• You can add up to 10 SQL statements simultaneously to retrieve data from different tables.

STEP-3: SQL statements

• In our example, we will be creating a simple PHP application for our sales management. This PHP dashboard will contain a chart where users can find the sales stats and maintain the data about the products.
• Now, enter the following SQL statement in text box in a 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

• Now, we want to execute our query and fetch the data from the tables. Click the Run Query button

• Query Result will appear. Now, we have to assign x-axis data to the x-axis column and y-axis data to the y-axis column. Select your x-axis data from the drop down list of X   and y-axis data from the drop down list of Y .
• Click Save Changes

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

STEP-4: Adjust the position

• You may adjust the size and the position of the Chart Panel by dragging its corner. The size and position are fully responsive according to the Bootstrap framework

STEP-5: Generate PHP dashboard source code

• So far we have successfully build our dashboard. In this step we are going to generate PHP dashboard source code we have just created. Click the Generate   button to auto-generate PHP dashboard source code for our PHP application

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

PHP dashboard source code

Following is an example of auto-generated PHP dashboard source code. You may copy & paste this source code dashboard PHP script in your PHP application.

/**
 * 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;}
</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>

 

 

Dashboard Open Source PHP

This auto-generated coding dashboard PHP source code is under MIT license, which you may customize as per your desire needs and can be used an anywhere you want. You can find the complete information about the license here for dashboard code in PHP.

 

Conclusion

In our example on how to make dashboard in PHP code for dashboard application, we have seen how to create dynamic dashboard in PHP without programming. Now we have a PHP script for dashboard which can be used with any web application that was customized to fit the requirements of the web design. The project also offers free and paid plans. You can also find Dashboard in PHP & MySQL free download version. This PHP dashboard source code can also be found on GitHub under this license for PHP Dashboard Open Source Community.

Best of all, with our Standard and Enterprise licenses include 100% source code, for you to enhance the functionality or incorporate PHP Dashboard into your web application or any PHP software solutions/products, analytics/data science/data warehouse enterprise systems or Joomla, Wordpress or Drupal sites.

All editions of our PHP Dashboard series are still fully functional, for sale and supported and provides increasing levels of support to address the queries of users and developers.

PHP Dashboard can also be implemented using an online API where you don’t have to mix with PHP dashboard source code. The online API uses universal HTML code which can be used in any platform. The data will be added or retrieved from the database using the API. You may find more information about the Online Dashboard.

You may want to take a look at our complete documentation and video tours of the latest version along with a live tour of user interface and step by step instructions for performing key features of Dashboard source code in PHP series.

Download PHP Dashboard