PHP Sunburst chart overview

PHP Sunburst chart displays hierarchical data through a series of circles, which are carved for each node. Each circle links to a level in the hierarchy. The central circle representing the root and the hierarchy moving outwards from it.

PHP sunburst chart with multiple levels of categories shows how the outer circles the child relate to the inner circles the parent.

Create sunburst chart in PHP

In this tutorial, we will be creating PHP Sunburst chart using our drag and drop tool and generate PHP code for our Sunburst chart without programming

Understand your data

The data must be sliced up and divided based on their hierarchical relationship to the parent. The degree of each slice is either divided equally under its parent node or can be made proportional to a value.

Prerequisite

Your data can be stored and retrieved from CSV, Excel, MySQL, MS SQL, PostgreSQL, Sybase, Cubrid & SQLite and should be in the following manner:

Requirements:

• PHP Version 7.2 or later
• Apache or Nginx
• Windows, Linux or Ubuntu
• Firefox 52, Chrome 57, IE 8
• Dashboard Builder. Available for downloading

Installation

• You can download sunburst chart illustrator tool fromsunburst chart illustrator tool
• Place the files in a directory on the web server. e.g. …/www/yoursite/dashbboardbuilder-v33-FREE/
• Unzip the file dashboard using Extract Here option to the root folder of "dashboardbuilder"

Sunburst chart illustrator

The dashboard builder is one of the great sunburst illustrator tool is using Bootstrap framework, D3.js and HTML5 which gives you a fully responsive, dynamic and rotate sunburst chart. With these great Sunburst illustrator tool you can create interactive database driven HTML5 and D3.js based dynamic sunburst chart and auto generate source code for your PHP application in few clicks. The sunburst charts crated with this great tool are fully responsive and fit to any device you use. You can retrive your sunburst chart from anywhere, any time on any standard browsers using any device such as PC, tablet or mobile phone.

PHP Sunburst Chart Examples

STEP-1: Retrieve your data from your data source

The dashboard builder tool which we are using to create our sunburst chart has the great number of data source and supports all major databases such as MySQL, MS SQL, SQLite, PostgreSQL, Sybase, and Cuboid to retrieve the data and create dynamic sunburst chart. But this is not the limit, if you have a data in Excel or in CSV file, this great sunburst illustrator tool also able to fetch data from these sources using the upload sub-tab as shown in the picture below.

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





• Now Click the Database icon
• Following screen will appear. In our Sunburst chart example, we will use a sample MS Excel file called sales-2019.xls to retreive the data. Now, Select MS Excel file from your computer and Save changes as mentioned in the screen.

• When you click the Save changes , a green tick mark with Excel icon will appear that shows that your Excel file is successfully uploaded and connected.

Step-2 Setting your chart preference

With this great dashboardbuilder tool you have the freedom to select your data for ids, parents and label nodes in a single click.

• To do so, select the gear icon for your Dashboard preference.

Sunburst Chart Settings

• The following screen will appear showing the data fetched from the Excel file.

• Now, select "Sunbursr" chart from the drop down list of type
• Select "ids" from the drop down list of Ids
• Select "parent" from the drop down list of Parent
• And select "label" from the drop down list of Label
• Click Save Changes

• You may adjust the size and the position of the Chart Panel by draging it's corncer.

• Now Click the Generate   button

• PHP code for your Sunburst chart will automatically generate, which can be copy past to your PHP application.

<?php
/**
 * DashboardBuilder
 *
 * @author Diginix Technologies www.diginixtech.com
 * Support  - http://www.dashboardbuilder.net
 * @copyright (C) 2019 Dashboardbuilder.net
 * @version 3.3
 * @license: This code is under MIT license, you can find the complete information about the license here: https://dashboardbuilder.net/code-license
 */

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


// for chart #1
$data = new dashboardbuilder(); 
$data->type[0]=  "sunburst";

$data->xaxis[0]="2019","Jan","Feb","Mar","Wk1Feb","Wk1Jan","Wk2Jan","Wk1Mar","Wk2Mar","Wk3Mar","25249","93577","41118","56682","69281","88575","95825","27160","58219","57389","12312","43212","48988","58792","12398"]; 
$data->yaxis[0]="","2019","2019","2019","Feb","Jan","Jan","Mar","Mar","Mar","Wk1Jan","Jan","Wk2Jan","Wk2Jan","Wk2Jan","Wk1Feb","Wk1Feb","Wk1Feb","Wk1Mar","Wk1Mar","Feb","Wk3Mar","Wk3Mar","Wk3Mar","Wk3Mar"];

$data->size[0]= ["2019","Jan","Feb","Mar","Wk1","Wk1","Wk2","Wk1","Wk2","Wk3","AFR","Wk3","AFR","AMER","ASIA","AFR","AMER","EUR","AFR","AMER","Wk2","AFR","AMER","ASIA","EUR"];


$data->name = "0";
$data->title = "";
$data->orientation = "v";
$data->xaxistitle = "";
$data->yaxistitle = "";
$data->showgrid = "true";
$data->showline = "true";
$data->height = "380";
$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 offset-md-4 offset-lg-4 col-xs-12 id0">
<div class="panel panel-default">
<div class="panel-heading">Sunburst Chart</div>
    <div class="panel-body">
        <?php echo $result[0];?>
    </div>
</div>
</div>
</div>
</div>
</div>
</body>