Introduction

When a business grows and amount of statistical conversion data is collected (e.g. visits, download, purchases, region), there is always a need to visualize the data in a manner to make it more conclusive. Data visualization Charts that makes your data come alive. My requirement was that Charts framework should be PHP based, Easy API learning curve, Interactive, HTML5 & Mobile friendly with support for Mysql and Other famous databases. I came across Fusioncharts for PHP, but it was way too expensive. The alternate solution was Charts 4 PHP. I’ll be discussing it in the rest of the article.

Background

After doing research work, I found that most of the active Chart libraries (that include D3, Jqplot, pChart, Highcharts) are based on JavaScript, and wrapping them in PHP will need further development time as well as cost of licensing (e.g. Highcharts). The learning of a complex API is also a challenge (e.g. D3). To overcome these challenges, a good approach would be to use a PHP based charting solution that has a simple API and produces Interactive, HTML5, mobile friendly as well as database driven charts. Fusioncharts was a good solution but it is a way out of budget for many businesses. Free version of fusioncharts are Flash based, which is almost outdated with the arrival of HTML5 and Responsive mobile apps.

Getting Started

What I like the most about the Charts 4 PHP is their Simple API and lines of code to get started. Learning curve is a major factor in using any framework but when the API is simple with properly documented and ready-made code examples, it definitely reduces development time and effort.

Charts 4 PHP can be downloaded here. Download the file and extract to web root, e.g., “<path-to-web-root>/chartphp“. If you run it in the browser, it comes up with ready-made demo charts and working code samples.

Coming back to the tutorial … You can create a simple chart with just a single PHP file using Charts 4 PHP Framework. Getting started is easy.

  1. Include Charts 4 PHP Framework file & Initialize Object
  2. Set the chart type and other options
  3. Rendering the chart
  4. Display at desired place in HTML code

[Image]

Step 1: Initializing Object

The first step is to include the Framework file and create a chart object.

include("../../lib/inc/chartphp_dist.php");
$p = new chartphp();

Step 2: Setting Options

The next step is to set data points of your charts, select chart type, chart title, and x-y labels.

// set data points
$p->data =array(array(3,7,9,1,4,6,8,2,5),array(5,3,8,2,6,2,9,2,6));

// set chart type
$p->chart_type = "area";

// set chart title
$p->title = "Area Chart";

// set label titles
$p->xlabel = "My X Axis";
$p->ylabel = "My Y Axis";

Step 3: Render

Now we will render the chart. This is simply done by calling the render() function. It accepts a unique chart-id (e.g. c1) and returns a variable containing chart code.

$out = $p->render('c1');

Step 4: Placement

Now, all the so-called hard work is done. We’ll now place the chart code in our HTML template.

<html>
<head>
    <script src="../../lib/js/jquery.min.js"></script>
    <script src="../../lib/js/chartphp.js"></script>
    <link rel="stylesheet" href="../../lib/js/chartphp.css">
</head>
<body>
    <?php echo $out; ?>
</body>
</html>

The Result

You can see how simple and less hassle it was. This is the beauty of any framework to wrap all the complexity and hard work behind it and provide a developer friendly API, which exactly this PHP Chart framework does.

Area Chart - Charts 4 PHP

Chart Types

This framework currently supports the following charts types:

  • Line
  • Area
  • Bar
  • Pie
  • Donut
  • Meter Gauge
  • Bubble

Source: http://www.chartphp.com/docs/#Chart_Type

Chart Color

You can customize the color swatches of your charts along with chart types. It comes with beautiful color combinations charts with chart types like pie, donut, bubble, bar, etc.

// set color to green
$p->color = "green";

// OR set color to red,blue,green for multi-color chart
$p->color = "red,blue,green";

// OR set colors using hex code
$p->color = "#1AAF5D,#F2C500,#F45B00,#8E0000,#0E948C";

Pie - Charts 4 PHP

Bubble Chart - Charts 4 PHP

Integration with MVC based Frameworks

As shown in Step #4, separating the PHP and HTML is a pretty intelligent idea. All major PHP frameworks like Yii, Laravel, Code Ignitor, CakePHP use MVC architecture which recommend this practice. If someone wants to integrate these charts in MVC based framework, he can just push the PHP code in the Controller section and move the HTML code in View. Pretty simple?

Database Integration Made Easy

The magic comes in when you want to build chart from the data from database server. For me, that’s the most powerful feature of this PHP Charts Framework. It uses PDO (Data Abstraction Layer) for PHP that connects to all major databases including Mysql, Microsoft SQL Server, Oracle, PostgreSQL, SQLite. We just provide an SQL Query as input and the framework, then do the rest by populating the chart data points with no coding of database connection, fetching and integration.

$p->data_sql = "select c.categoryname, sum(a.quantity) as Sales
                from products b, `order details` a, categories c
                where a.productid = b.productid and c.categoryid = b.categoryid
                group by c.categoryid
                order by c.categoryid";

And the result, a professional looking, animated database driven chart waiting to be placed on your app dashboard.

[Image]

The demo browser in the downloaded package comes up with Northwind database and database driven chart demos.

But wait, I’ll keep that for (hopefully) the next article of ‘Charts 4 PHP – Database Integration’. If you are curious and want to give a try now, you can review the Database Integration section of documentation.

Final Thoughts

Benefits of using Charts 4 PHP are very obvious. Reducing development time, make fancy looking charts and dashboards in no-time generating database driven charts with basic SQL Query, etc. The product is still in beta and more promising features may be coming soon. It is currently free for personal and non-commercial use. However commercial use license is yet to be announced.

It comes with a lot of working demos and ready-made code examples, which a developer can copy-paste and integrate in app. Demo Center shows the demo along with source code. Documentation is also there for help, which is mostly not required after reviewing the self explanatory code samples.

What next, download it and surprise your supervisors with this RAD Charting framework.

Advertisements