Skip to content

DashboardBuilder/heatmap-chart-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

INSTALLER .........

  1. Extract the product archive in web root. e.g. www.dashboarduilder
  2. Open it in browser to run installer. e.g. http://localhost/ dashboarduilder

INTEGRATION

  • For integration in your app, you need to copy the PHP code to your php application.
  1. The folder "inc", “assets” and “css” will be replaced by path where you place 'lib' folder (if changed)
 <script src="assets/js/dashboard.min.js"></script>  <! --  copy this file to assets/js folder -- >
 <link rel="stylesheet" href="css/bootstrap.min.css"> <! --  Bootstrap CSS file, change the path accordingly -- >
  1. Update include path where you place “inc/dashboard_dist.php”. (if changed)

    Include(“inc/dashboard_dist.php"); Refer 'Getting Started' section on https://www.dashboardbuilder.net/documentation for more details.

Refer 'Support' on https://www.dashboardbuilder.net/support for queries and support.

RESULT

PHP CODE

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

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


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

$data->xaxis[0]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"]; 
$data->xaxis[1]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->xaxis[2]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->xaxis[3]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->xaxis[4]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->xaxis[5]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->xaxis[6]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[0]= ["SUN","MON","TUE","WED","THU","FRI","SAT",];
$data->yaxis[1]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[2]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[3]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[4]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[5]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->yaxis[6]= ["Midnight","01:00 AM PT","02:00 AM PT","03:00 AM PT","04:00 AM PT","05:00 AM PT","06:00 AM PT","07:00 AM PT","08:00 AM PT","09:00 AM PT","10:00 AM PT","11:00 AM PT","Noon","01:00 PM PT","02:00 PM PT","03:00 PM PT","04:00 PM PT","05:00 PM PT","06:00 PM PT","07:00 PM PT","08:00 PM PT","09:00 PM PT","10:00 PM PT","11:00 PM PT"];
$data->text[0]= ["487.6","480","488.4","490.6","500.6","493","512.4","518.2","536.8","534","534.2","537.8","544.6","539.2","544.2","535.2","542.8","554.4","556.8","540","526.2","502.4","499.2","495.4"];
$data->text[1]= ["486.6","485.2","488","491.8","502.8","514.6","543","557.6","575","576.6","574.4","568.2","579.4","569.4","567.6","567.8","567.8","574.4","580.2","567.4","538.8","514.6","502.8","498.2"];
$data->text[2]= ["486.4","483.8","483.2","492.2","506","511.6","543.6","559.2","556.8","558.4","559.8","570","564.6","564.2","554.4","557.4","556.6","561.2","558.2","537.8","513.4","501.8","492.4","478.2"];
$data->text[3]= ["476","475.2","474.6","483.4","490.2","515","544.6","549.6","558.8","585.2","555","560.8","554","572.2","534.2","543.8","568.6","601","580.6","562.4","523.4","501.6","495","489.2"];
$data->text[4]= ["487.6","484.6","487.2","486","497.4","511","541.4","550","564.4","563","572.4","579.8","592.4","578","556","575.8","565.8","551.4","562.4","550.8","529.6","504.8","497.8","495.6"];
$data->text[5]= ["490.2","488.8","492.4","492.6","505.2","517","538.4","550.8","560.4","551.4","555.8","561","557.2","561.8","549","536.4","536","530.6","533","534","511.6","503.6","492.6","486.6"];
$data->text[6]= ["480.2","481.8","486.4","490.4","497.4","504.8","515","522.4","528","528.8","530.4","531.6","526.8","520","520.8","526","520.6","526.8","536","526.8","512.4","509.4","495.2","490.8"];

$data->name = "col0";
$data->title = "Heatmap Chart";
$data->orientation = "";
$data->xaxistitle = "Time";
$data->yaxistitle = "Days";
$data->showgrid = "";
$data->showline = "";
$data->height = "";
$data->width = "";
$data->tracename[0]=  "area";


$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 --> 

<style>
<!-- adjust the height width as per your need -->;
/*
#col0{
height:350px;
}
#col1{
height:350px;
}
*/
</style>

</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>

LICENSE

Must read and agree LICENSE.txt before use.