PHP-based Super Cool HTML5 Interactive Chart _php tutorial

PHP-based Super cool HTML5 Interactive chart

Implement professional-grade web-based diagrams in PHP without the need for deep HTML5 and JavaScript knowledge.

Introduced

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

Background

As a major back-end programmer , I didn't have much time to study the use of JavaScript clients to see the charts on the Web within 24 hours, or the advanced front-end coding knowledge. Fundamentally, I want PHP developers with almost no front-end programming experience to be able to quickly develop beautiful charts.

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

The basic elements of Phpchart

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

The Phpchart Lite version can be downloaded fromherehttp://phpch art.org/down loads/. Download the file and unzip it to the Web site root directory.

Set conf.php

The first thing we want 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 chart

 
  
  

  
   
   

  
   
   
Require_once (".. /conf.php "
 
  
  

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

 
  
  

  
   
   
$pc = New c_phpchartx (array (12322   3
  
   
   

 
  
  

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

That's what I call the least amount of coding. When you have a team of programmers to work with, it's pointless to learn the basics hard. One thing that any programmer wants to do as soon as possible is to study complex documents from a new set of libraries or tools.

By the way, the name of the second parameter in the constructor should be unique to your chart. I type "simplest_graph" or any non-whitespace string. It must be a unique value so that you can have multiple charts on a single page.

Add title

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

 
  
  

  
   
   
$pc->set_title (' text '
 
  
  

Add animations

One of the things that Pchart can't do is animation. 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 now have a title and animation. The complete code is as follows:

 
  
  

  
   
   
New c_phpchartx (array (12322 3) ),' simplest_graph '  
  
   
   
$PC->set_animate (true
  
   
   
$pc->set_title (' text '='My simplest Graph '
  
   
   

 
  
  

Code Essence

If you look at the source in the browser, you will 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 by the client's JavaScript in the browser, the code at the front end is completely PHP.

It is popular because it is no longer necessary to worry about JavaScript for me-a PHP developer, because Phpchart will automatically handle it for me. Here is all the JavaScript code generated when viewing the source code-the result of my previous four lines of PHP code.

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

In addition, the PHP data set is automatically converted to a JavaScript array, so the following PHP array:

 
  
  

  
   
   
Array (Array (123   3
 
  
  

Become a JavaScript array:

 
  
  

  
   
   
[123,3,Wuyi, 
 
  
  

Changing the renderer type

Phpchart supports the implementation of column, line and stack charts, strip line plots, block charts, bubble charts, candle charts,gecko diagrams, meter diagrams , 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 above example to a pie chart

 
  
  

  
   
   
$pc->set_series_default (Array (' renderer '='plugin::P ierenderer '
 
  
  

Please note that I am using the Phpchart Enterprise Edition. Phpchart Lite only supports line charts.

Arrays and naming conventions

There are also some noteworthy places to watch. First, almost all of the parameters used in the Phpchart function are an array, not all, but almost all of them. Just keep this in mind and you'll be able to avoid a lot of headaches during debugging. I'll briefly cover the debugging features later on. Second, the renderer is called a "plugin" in Phpchart, so you must pass "plugin::P ierenderer" In this way, with a double colon in the middle. For custom JavaScript, use "Js::yourjavascriptfunctioname".

Advanced Phpchart: Custom JavaScript

So far, all I have shown is PHP. In most cases, Phpchart can do very well for simple PHP function calls. To get the most out 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 sine value to be displayed from a set of random numbers. It is then passed 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<; i+=0.5) {
  
  

  
data[0].push ([I, Math.sin (i)]);
  
  

  
}
  
  

  
 return data;
  
  

  
};
 
 

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

Export Charts to pictures

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

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 its built-in debugging capability. On its website, all online examples of http://phpchart.org/examples/) have debugging to enable vivid demos and two clear tabs for easy portability of the following code-- JavaScript and PHP, respectively.

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

 
  
  

  
   
   
define (' DEBUG 'true
 
  
  

The final thought

A major benefit of phpchart is that by using this tool, PHP programmers can implement professional-grade web-based diagrams-without having to delve into HTML5 and JavaScript knowledge.

If you are a layman in front-end programming, like me, but 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 documentation--you can understand the code directly.

http://www.bkjia.com/PHPjc/1031255.html www.bkjia.com true http://www.bkjia.com/PHPjc/1031255.html techarticle PHP-based Ultra cool HTML5 Interactive charts enable professional-grade Web-based charts with PHP without the need for deep HTML5 and JavaScript knowledge. Introduced recently, I need to get from a set of PHP data groups fast ...

