PHP based Super cool HTML5 Interactive chart

Use PHP to implement professional-level web-based charts without the need for in-depth HTML5 and JavaScript knowledge.

Introduced

Recently, I need to quickly create a chart from a set of PHP data sets. The requirement chart must be interactive, user-friendly, and downloadable. After evaluating some of the solutions for PHP diagrams, including Phpchart, Pchart, and Highcharts, I decided to use Phpchart as my preferred tool.

Background

As a major back-end programmer, I don't have much time to study the use of JavaScript (customers want to see the charts online within 24 hours), and they don't have advanced front-end coding knowledge. Fundamentally, I want PHP developers who have little experience in the front-end programming to quickly develop beautiful charts.

I've tried Pchart, a popular PHP chart library. The resulting chart looks pretty good, although it's downloadable, but the charts are static images. Highcharts seems to be the best choice. The chart looks stunning, animated, and has a lot of customization options, but it's also very complex and requires a lot of javascript knowledge. Highcharts is neither designed for PHP, nor is it free for business.

The basic elements of Phpchart

My favorite place to Phpchart is that it allows people to start with simple and minimal code.

Phpchart Compact version can download http://phpchart.org/downloads/from here. Download the file and extract it to the site root directory.

Set conf.php

The first thing we have to do is set the variable  SCRIPTPATH to the Phpchart class Library of the conf.php file. This variable represents the relative or absolute URL of the Phpchart library on your Web server.

  

	
	
   
 Define (' ScriptPath ', '/phpchart/'); 


  

Create the simplest diagram

  

	
	
   
 Include PHP header file conf.php: 

	
   
 Require_once (".. /conf.php ") 


  

Call the constructor C_PhpChartX, and finally call the draw () function.

  

	
	
   
 $PC =new c_phpchartx (Array (123, N, 3), ' simplest_graph '); 

	
   
 $PC->draw (); 


  

This is the code you need to start. The following is the rendered output.

This is what I call the smallest number of encodings. When you have a team of programmers coming to work, it's pointless to learn the basics hard. One thing any programmer wants to do as soon as possible is to dive into complex documents from a new set of libraries or tools.

Incidentally, the naming of the second parameter in the constructor should be unique to your chart. I type "simplest_graph", or any non-space string. It must be a unique value so that you can have multiple charts in one page.

Add title

You should add a title to your chart so that users know what they are looking at.

 
  

  

	
	
   
 $PC->set_title (Array (' text ' => ' my simplest Graph ')) 


  

Add animation

One of the things that Pchart can't do is to animate. In Phpchart, animation support can be used by simply calling Set_animate and passing a true value.

  

	
	
   
 $PC->set_animate (TRUE); 


  

That's it. Your chart should already have titles and animations. The complete code is as follows:

  

	
	
   
 $pc = new C_phpchartx (Array (123, N, 3), ' simplest_graph '); 

	
   
 $PC->set_animate (TRUE); 

	
   
 $PC->set_title (Array (' text ' => ' my simplest Graph ')); 

	
   
 $PC->draw (); 


  

Code Essence

If you look at the source in the browser, you'll find that Phpchart automatically contains a lot of JavaScript and CSS files, including Jquery.js, Jquery-ui, and Jqplot.js, Jquery-ui.css, and so on. Although the chart is rendered in the browser through the client's JavaScript, the code at the front end is entirely PHP.

It's popular because it doesn't have to worry about JavaScript anymore for me, a PHP developer, because Phpchart will automatically handle it for me. The following are all the JavaScript code generated when you look at the source code-the result of four lines of PHP code that preceded me.

<script language= "JavaScript" type= "Text/javascript" >
var _simplest_graph_plot_properties;
$ (document). Ready (function () {
settimeout (function () {
_simplest_graph_plot_properties = {
"title": {
' Text ': ' My simplest Graph ', ' Show ': 1
}, "animate": True, "Animatereplot": True
}
$.jqplot.config.enableplugins = true;
$.jqplot.config.defaultheight = 300;
$.jqplot.config.defaultwidth = 400;
_simplest_graph= $.jqplot ("Simplest_graph"),
[[123, Yi, 3]], _simplest_graph_plot_properties);
}, 200);
});
</script>

As you may also notice, "simplest_graph”is used as part of a JavaScript variable, such as_simplest_graph_plot_propertiesrepresenting a Jqplot object." This is the reason I said that naming must be the only one.

In addition, the PHP Data group is automatically converted to a JavaScript array, so the following PHP array:

  

	
	
   
 Array (Array (123, 34, 51, 22, 3)) 


  

Become a JavaScript array:

 

  

	
	
   
 [[123,34,51,22,3]] 


  

Change Renderer Type

Phpchart supports the implementation of column, line and stack graphs, banded line graphs, block diagrams, bubble charts, candle charts, gecko graphs, meter graphs, and several other types of charts. Renderer Support:

• Barrenderer

• Beziercurverenderer

• Blockrenderer

• Bubblerenderer

• Canvasaxislabelrenderer

• Canvasaxistickrenderer

• Categoryaxisrenderer

• Dateaxisrenderer

• Donutrenderer

• Enhancedlegendrenderer

• Funnelrenderer

• Logaxisrenderer

• Mekkoaxisrenderer

• Mekkorenderer

• Metergaugerenderer

• Ohlcrenderer

• Pyramidaxisrenderer

• Pierenderer

If you do not specify a type, the default chart type is a line chart. To change the chart type, you need to call the Set_series_default function. For example, change the example above to a pie chart

  

	
	
   
 $PC->set_series_default (Array (' renderer ' => ' plugin::P ierenderer ')); 


  

Please note that I am using the Phpchart Enterprise Edition. The Phpchart compact version only supports line charts.

Arrays and naming conventions

Here are some notable places to watch. First, almost all of the parameters used in the Phpchart function are an array, not all, but almost all of them. With this in mind, you can avoid a lot of headaches when debugging (I'll briefly overwrite the debugging features later). Second, the renderer is called a "plugin" in Phpchart, so you have to pass "plugin::P ierenderer" Like this, the middle double colon. For custom JavaScript, use "Js::yourjavascriptfunctioname".

Advanced Phpchart: Customizing JavaScript

So far, all I've shown are PHP. In most cases, for simple PHP function calls, Phpchart is perfectly capable of doing well. To make the most of Phpchart, you might want to use custom JavaScript. For example, you can use Phpchart to load data from JavaScript functions and external sources.

The following sineRenderer is a custom JavaScript function that defines the display of sine from a set of random numbers. Then pass it to the Set_data_renderer function.

Php:

$data 1 = array ();
$pc = new C_phpchartx (Array ($data 1), ' basic_chart_4 ');
$pc->set_title (' text ' => ' Basic Chart with Custom JS ');
$PC->set_data_renderer ("Js::sinerenderer");
$PC->add_plugins (Array (' pointlabels '));
$PC->set_animate (TRUE);
$PC->draw ();
Javascript:
Sinerenderer = function () {
var data = [[]];
for (var i=0; i<13; i+=0.5) {
Data[0].push ([I, Math.sin (i)]);
}
return data;
};

To find out more about the Set_data_renderer function click here: http://phpchart.org/phpchart/docs/output/c_phpchartx_set_data_renderer@.html

Export a chart to a picture

At first, I was bothered by this because I didn't know how to export the chart. It turns out that Phpchart charts can be exported as downloadable pictures, but the process is not well documented. I found that adding the following code to the bottom of all the pages would turn the tide:

  

	
	
   
 <script type= "Text/javascript" 

	
   
 Src= "Http://www.codeproject.com/phpChart/js/showjs.js" ></script> 


  

Download showjs.js:http://phpchart.org/phpchart/js/showjs.js

Debug Phpchart

Finally, before concluding, I would like to mention a very valuable feature of Phpchart. That's the built-in debugging feature. On its web site, all online examples (http://phpchart.org/examples/) have been debugged to enable vivid demos and two tabs that can easily migrate the following code-- JavaScript and PHP are respectively.

To enable debugging, simply add the following line of code to the conf.php file:

  

	
	
   
 Define (' DEBUG ', true); 


  

The last Thought

One of the main benefits of Phpchart is that by using this tool, PHP programmers can implement professional-level web-based charts without having to delve into HTML5 and JavaScript knowledge.

If you're a layman with front-end programming like me, but you also need to generate interactive Web diagrams, you might like Phpchart. The HTML5 chart example for Phpchart has been fully listed in the following page. With luck, you may not need a document-you can understand the code directly.