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 to expensive. Alternate solution was Charts 4 PHP. I'll be discussing it in rest of the article.
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 browser, It comes up with ready-made demo charts and working code samples.
Coming back to tutorial … You can create a simple charts 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.
Step1: 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();
Step2: Setting Options
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";
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');
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>
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.
This framework currently supports following charts types.
- Meter Gauge
You can customize the color swatches of your charts along with chart types. It comes with a 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";
Integration with MVC based Frameworks
As shown in Step #4, separating the PHP and HTML is pretty intelligent idea. All major PHP frameworks like Yii, Laravel, Code Ignitor, CakePHP uses MVC architecture which recommend this practice. If someone want to integrate these charts in MVC based framework, He can just push the PHP code in 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, MS 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.
The demo browser in downloaded package comes up with northwind database and database driven chart demos.
But wait, I'll keep that for (hopefully) 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.
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.