Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Cool Charts in PHP

DZone's Guide to

Creating Cool Charts in PHP

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

· Big Data Zone
Free Resource

Access NoSQL and Big Data through SQL using standard drivers (ODBC, JDBC, ADO.NET). Free Download 

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):

Image title

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

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!

The fastest databases need the fastest drivers - learn how you can leverage CData Drivers for high performance NoSQL & Big Data Access.

Topics:
charts ,data visualization ,php ,javascript ,web developement ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}