As a software engineer here at ZingChart, I often receive questions from users about how ZingChart works with PHP. I could keep telling people, “ZingChart absolutely works well with PHP.

And yes, it renders beautiful, fast, and responsive charts on any environment whether it be Linux, Windows, or Mac.” But I built a full dashboard demo with the LAMP stack to show a bootstrap dashboard instead.

A bootstrap dashboard for the web is just like the dashboard in your car. It needs to display the most relevant data at a glance. Similarly, the purpose of a dashboard on the web is to serve as a web page that anyone can look at to get an instant update as to the current state of their project. We’re accomplishing that by combining some thoughtfully selected charts into a dashboard.

dashboard success

For a common use case, I chose to make a dashboard with a revenue over time approach. The following chart is the first one I came up with.

revenue chart for bootstrap dashboard

From here on I will assume at least a beginner's level of familiarity with PHP, MySQL, and JavaScript languages. If you need a refresher on setting up your MySQL instance on your machine feel free to read getting started with MySQL.

Also, since this dashboard is using PHP, we are using Apache. If you do not already have Apache installed on your machine, please download it here to get Apache up and running on your computer. Setup of Apache configuration is beyond the scope of this document. If you need help setting up Apache please read the appropriate documentation on the web.

Once I put together the charts for the dashboard, I set out to put the bootstrap dashboard together. Turns out there are four main steps.

Let's begin.

Building a Bootstrap Dashboard in 4 steps

1. Construct the Database Tables

The first step in making a dashboard is to create your tables in MySQL that will organize your data coherently. The following UML diagram was built using a very handy tool called MySQL Workbench.

uml diagram

The Plans table holds the “plans” offered by this company. For example, I inserted some data into this table using a query like this
INSERT INTO plans VALUES (name=’personal’,cost=19.99,expected=50)’
and
INSERT INTO plans VALUES (name=’startup’,cost=29.99,expected=40);
And so on…
The Sales table represents the dates that the company has sold a plan to their clients. For example
INSERT INTO sales VALUES (date=’12-25-15’,plans_id=1);

NOTE: You can auto-generate the data for the database by uncommenting the form in index.html beginning on line 34. Once you have uncommented the form, save it, then reload the page and then click on the button, ONE TIME to generate the data. Reload the page and you will be good to go.

This table has a foreign key that is linked to the Plans table on the attribute ‘plans-id’. All this means is that this sale correlates to a plan that already exists in the Plans table. Makes sense, right?

You can view the SQL queries I used on the repo here to see how I populated the database tables.

2. Get and Build Data Returned from Database

Next we need to query the DB for the data we previously inserted. The following was written in PHP that was one such query:

$plan_metadata_query = "SELECT COUNT(*),plans.name, plans.cost FROM sales INNER JOIN plans ON sales.id=plans.id GROUP BY sales.id";

This query returns the number of each of the plans sold as well as the cost of each plan. The results look like this:

results

Parsing this data in PHP is really simple. We just need to loop over each ‘row’ of the data and store this in arrays like so:

$salesCounts = [];  
  $planNames = [];  
  $planCosts = [];  
  $totalRevenues = [];  
  if ($result = $mysqli->query($plan_metadata_query)) {  
    // Fetch the result row as a numeric array  
    while( $row = $result->fetch_array(MYSQLI_NUM)){  
      array_push($salesCounts, $row[0]*1);  
      array_push($planNames, $row[1]);  
      array_push($planCosts, $row[2]*1);  
      array_push($totalRevenues, $row[2] * $row[0]);  
    }  
    // Free the result set  
    $result->close();  
  }  

  $mysqli->close();  

Before we stuff these arrays into a JSON object, we need to calculate the revenue of each plan. To do this, I wrote the following:

$sumTotal = 0;  
for ($i = 0; $i < count($totalRevenues); $i++) {  
   $sumTotal += $totalRevenues[$i];  
}  

Great! Now we stuff these arrays into a JSON object like this:

$data = array(  
    names => $planNames,  
    salesCounts => $salesCounts,  
    prices => $planCosts,  
    totalRevenues => $totalRevenues,  
    sumTotal => $sumTotal  
);

A JavaScript Object Notation (JSON) object is just a structure that can contain: Strings, Numbers, Booleans, Arrays, and Objects which are separated by commas and wrapped in curly braces. Functions are not valid. A typical JSON object could look like this:

{  
    first_name: ‘Justin’,  
    last_name: ‘Bogart’,  
    salary: 100,000,000.00,  
    Email: jbogart@zingchart.com  
    company: {  
        name: ‘ZingChart’,  
        email: support@zingchart.com  
        numEmployees: 100  
    }  
}  

Now that we have built the data structure, it is ready for consumption by the client. So let’s send it to them when they request it. The following is how we send back this JSON:

echo json_encode($data);

All this function did was convert the data we had earlier into a JSON formatted similarly as shown above.

3. Request Data from Client-side

At this point, we will be working on the client-side, meaning JavaScript. JavaScript allows us to make HTTP requests to our server that is holding and executing the PHP code for us. And it is here, on the client-side, where our charts live. Let’s get started. The following is how we configure our charts.

var myConfig1 = {  
    type: ‘area’,  
    legend: {  
        draggable: true,  
        title: {  
            text: ‘Legend Title’  
        }  
    },  
    Series: [  
        {  
            values: [ 25, 34, 33, 56, 71, 89, 120, 75 ]  
        }  
    ]  
};  

Now we request the data from the server using AJAX. An AJAX request will allow us to get the data from the server without refreshing the page. Using AJAX allows the web page to continue executing without waiting for the request to return.

Upon returning from the AJAX request, we will update our chart configuration with the returned data.

// Instantiating an instance of the AJAX request. Xhr stands for XMLHttpRequest  
var xhr = new XMLHttpRequest();  
xhr.open("GET", "chart1_feed.php");// this is an HTTP GET request  
xhr.setRequestHeader("Content-Type", "application/json");// Setting the HTTP header to expect a JSON response  
xhr.addEventListener("load", function() {  
    var data = JSON.parse(this.responseText);  

    // myConfig is our default chart json configuration, shown later  
    myConfig1.series[0].values = data.series;// storing data from server to the series values  
    myConfig1.scaleX.values = data.dates;// storing the data from server to the x-axis scales  

    // Render the chart  
    zingchart.render({  
        id : 'chart1',// this id is from your HTML element, usually a Div element  
        data : myConfig1,  
        height: 400,  
        width: '100%'  
    });// notice that the argument to this render function is a JSON as well.  

    // Print the Max Revenue  
    document.getElementById('chart1-maxValue').innerHTML = (data.maxRevenue).formatMoney(2);  
});  

// Send the request off to the server  
xhr.send();  

4. Render the Charts in a Dashboard

At this point the chart is already rendered. The initial configuration is used to specify what the chart will look like. For example, if we want to build an area chart with a draggable legend with a title we need to tell ZingChart what we want. To talk to ZingChart we supply it with a configuration in the form of … yep, you guessed it, a JavaScript object.

Here is a snapshot of what the final finished bootstrap dashboard looks like. Note that this image contains more than what was presented in this document. Otherwise, feel free to interact with the real thing.

bootstrap dashboard screenshot

Now, Make Your Own Dashboard

To be clear, we have not built out a full bootstrap dashboard with the steps listed in this article. The purpose of this write-up is to show you how to get the ball rolling in as few steps as possible.

If you are interested in seeing how all the pieces fit together, please visit our repo and browse the code to see what else you can do with ZingChart on LAMP. If you have any questions or comments please do not hesitate to use any of the following options:

  • Send me an email directly

  • Reply in the comments below

  • Post an issue on our repo.

We would love to hear your thoughts and questions and will respond promptly!

bootstrap dashboard repo button