Creating Cool Charts in PHP

Using PHP and FusionCharts to create cool live charts in your web applications.

Gagan Sikri

Feb. 26, 16 · Tutorial

Like (13)

Save

12.77K Views

No matter how many server side languages come up, there is nothing that can replace PHP. At least not in the near future. PHP still forms the backbone of many of the most famous web applications.

If you are a backend developer and PHP is part of your tech stack, you will find this tutorial useful. In this I will go over the step-by-step process of creating beautiful charts using PHP, FusionCharts' core JavaScript charts library, and its PHP charts wrapper.

This is what we are making today (see the live version here):

Four step process that we are going to follow:

Step 0: Preparing data
Step 1: Including JS and PHP files
Step 2: Creating chart object
Step 3: Rendering the chart

Step 0: Preparing Data

Since you need to have the data before you start planning to visualize it, I am calling this step as step-0 instead of step-1.

FusionCharts understands both XML and JSON data formats, but we will be using only JSON for this tutorial. We will start our tutorial by converting below data into JSON key-value pair recognized by FusionCharts.

Month	Revenue
Oct	490000
Nov	900000
Dec	730000

Here is the JSON representation of above data:

[
    {"label": "Oct", "value": "490000"},
    {"label": "Nov", "value": "900000"},
    {"label": "Dec", "value": "730000"}
]

We are going to plot a bar chart using above data and the formatting we did above is good enough for it. It might be a little complex for other chart types.

Step 1: Including Dependencies

In this step we will include FusionCharts' core JavaScript library and its PHP charts wrapper.

Here's how we do it:

<? php
// including FusionCharts PHP wrapper
    include(path/to/fusioncharts.php);
?>

<head>
    <!-- FusionCharts core package files -->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>

Step 2: Creating Chart Object

Now we will create an object for our chart $coolChart using FusionCharts' PHP Wrapper class. Syntax for creating chart object is as below:

$objectName = new FusionCharts("chart type",
              "unique chart ID",
              "Chart Width",
              "Chart Height",
              "HTML Element for Chart",
              "Chart Data Format",
              "Data Source");

Here's the chart object for the chart we are making in this tutorial:

$coolChart = new FusionCharts("bar2d", "myCoolPHPChart", "100%", "600",
               "barchart-container", "json",
               '{
                "chart": {
                    "caption": "Monthly revenue for Q4 - 2015",
                    "xAxisName": "Month",
                    //Other Chart Options
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                } //More Chart Data
            }');

“Data Source” mentioned in the above syntax contains 2 objects:

Chart Object: It includes various attributes responsible for chart interactivity and cosmetics. Some of them are explained as below:
- showHoverEffect: (Boolean) It is used to enable or disable hover effect in chart.
- plotFillHoverColor: (Hex Code/ Color Name) It is used to define plot color on mouseover.
- plotFillHoverAlpha: (Int) It is used to define transparency of hover color.
- baseFont: (String) It is used to define font family for the chart.
- baseFontSize: (Int) It is used to set font size across the chart.
- baseFontColor: (Hex Code/ Color Name) It is used to set font color across the chart.
Data Object: It includes labels and their corresponding values for each data plot. Other attributes that can be added inside data object are:
- displayValue: (String) It allows you to set custom string value for particular data plot.
- link: (string) It allows you to take a chart's functionality to next level by linking data plot to a webpage, drill-down chart or a custom JavaScript function.
- showLabel: (Boolean) It is used to enable or disable label display for particular data plot (bar).

There are tons of customization options available that can be used based on your particular use case. You can explore this huge chart attributes list for exploring further.

Step 3: Rendering the Chart

We will define HTML <div> element where chart will be rendered. Here is how we do it:

<body>
    <div id="barchart-container">Cool Chart on its way!</div>
</body>

To render the chart we will call render method for our chart object created in above step.

$coolChart->render();

If you followed everything I mentioned above properly, you should have a working chart with you. If you are seeing any errors in your code, please refer to this GitHub repo for full source code for the project we just made.

More Resources

In this tutorial, we passed JSON for chart directly inside chart object but there are other ways of loading data as well. You can refer to this documentation page to learn about those.
PHP and MySQL are considered as one of the best combinations out there for server-side language and a database, and are currently being used in many popular web applications. To learn more about their usage see this tutorial on creating drill-down charts charts using PHP with data from MySQL database.

PS: I will be active in the comments section, so feel free to post any questions you might have about this tutorial. More than happy to help!

PHP Chart

Opinions expressed by DZone contributors are their own.

Comments