Create Combination chart and generate PHP code for your apps
A combination chart combines from different types of charts. For example, a combination of line, bar, are, etc. To be noted that the series of chart type are rendered in the order they appear in trace array and as a result, they overlap others. A line chart, bar chart, area charts, histogram or scatter chats cannot be combined with any other chart type.
Dashboard Builder helps you to create combination chart with a drag and drop tool and a SQL engine with ease. Dashboard Builder generates PHP source code for you to use it anywhere in your application.
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
- Download from https://dashboardbuilder.net/download-free-dashboard
- Place the files in a directory on the web server. e.g.
…/www/dashboar/dbuilder/ - Unzip
the file using Extract Here option to the root folder of "dashboardbuilder"
Create your first Combination Chart
- Run the web folder in your browser. e.g. http://localhost/dashboardbuilder following welcome screen will appear
- Now Click the Database icon
- The 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 Dashboard 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 or just click on snakey tabel
select c.categoryname, sum(a.quantity) as 'Sales 1997', sum(a.quantity)+1000 as 'Sales 1998' 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;
- Click the Run Query button
- Query Result will appear.
- Select "Bar" as Chart Type for Trace 1. Select your CategoryName from the drop down list of X and Sales-1997 from the drop down list of Y .
- Now, click to add Trace 2
- Select "Line" from the drop down list of Type for Trace 2. Select your CategoryName from the drop down list of X and Sales-1998 from the drop down list of Y .
- Click Save Changes
- Charts will be appeared on the screen as shown below.
- Now extend the Generate button and click on the PHP Code
- 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 3.0
* @license: license.txt
*/
include("inc/dashboard_dist.php"); // copy this file to inc folder
// for chart #1
$data = new dashboardbuilder();
$data->type[0]= "bar";
$data->type[1]= "line";
$data->source = "Database";
$data->rdbms = "sqlite";
$data->servername = "";
$data->username = "";
$data->password = "";
$data->dbname = "../data/Northwind.db";
$data->xaxisSQL[0]= "select c.categoryname, sum(a.quantity) as ^Sales 1997^, sum(a.quantity)+1000 as ^Sales 1998^ 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 ;";
$data->xaxisCol[0]= "CategoryName";
$data->xaxisSQL[1]= "select c.categoryname, sum(a.quantity) as 'Sales 1997', sum(a.quantity)+1000 as 'Sales 1998' 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 ;";
$data->xaxisCol[1]= "CategoryName";
$data->yaxisSQL[0]= "select c.categoryname, sum(a.quantity) as ^Sales 1997^, sum(a.quantity)+1000 as ^Sales 1998^ 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 ;";
$data->yaxisCol[0]= "Sales 1997";
$data->yaxisSQL[1]= "select c.categoryname, sum(a.quantity) as 'Sales 1997', sum(a.quantity)+1000 as 'Sales 1998' 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 ;";
$data->yaxisCol[1]= "Sales 1998";
$data->name = "0";
$data->title = "Combination Chart";
$data->orientation = "v";
$data->xaxistitle = "Months";
$data->yaxistitle = "Profit";
$data->showgrid = "true";
$data->showline = "true";
$data->height = "266";
$data->width = "";
$data->col = "0";
$data->tracename[0]= "Rainy Day";
$data->tracename[1]= "Profit";
$data->color[0]= "#1A94FF";
$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="assets/css/bootstrap.min.css"> Bootstrap CSS file, change the path accordingly -->
</head>
<body>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<?php echo $result[0];?>
</div>
</div>
</div>
</div>
</body>
