PHP-based ultra-Cool HTML5 interactive chart

PHP-based ultra-Cool HTML5 interactive chart

Use PHP to implement professional-level Web-based charts without in-depth HTML5 and JavaScript knowledge.

Introduction

Recently, I need to quickly create charts from a group of PHP Data groups. The required charts must be interactive, user-friendly, and downloadable. After evaluating some PHP chart solutions, including phpChart, pChart, and Highcharts, I decided to use phpChart as my preferred tool.

Background

As a major backend programmer, I don't have much time to study using JavaScript to see charts online within 24 hours.) I don't have any advanced front-end coding knowledge. Basically, I want PHP developers who have almost no front-end programming experience to quickly develop exquisite charts.

I tried pChart, a popular PHP chart library. The generated chart looks pretty good. Although it can be downloaded, it is still a static image. Highcharts seems to be the best choice. A chart looks amazing, it is animated, and has many custom options, but it is also very complicated and requires a lot of JavaScript knowledge. Highcharts is neither designed for PHP nor free for business purposes.

Basic elements of phpChart

What I like most about phpChart is that it allows people to start with simple and minimal code.

PhpChart Lite version can be downloaded from http: // phpchArt.org/downLoads /. Download the file and decompress it to the root directory of the website.

Set conf. php

The first thing we need to do is set variables.SCRIPTPATHTo the PhpChart class library in 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

 
 

  
  
Include the PHP header file conf. php:
  
  
Require_once ("../conf. php ");
 
 

Call ConstructorC_PhpChartXAnd call the draw () function.

 
 

  
  
$pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), ‘simplest_graph’); 
  
  
$pc->draw(); 
 
 

This is the code you need. The following figure shows the rendered output.

This is what I call the minimum number of codes. When you have a team of programmers to work, it doesn't make sense to study the basics. 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 for your chart. I typed "simplest_graph" or any non-space string. It must be a unique value so that you can have multiple charts on a page.

Add title

You should add titles for your charts so that users can know what they are watching.

 
 

  
  
$pc->set_title(array('text'=>’My Simplest Graph')); 
 
 

Add an animation

One thing pChart cannot do is animation. In phpChart, animations can be used simply by calling set_animate and passing the true value.

 
 

  
  
$pc->set_animate(true); 
 
 

That's it. At this time, your chart should already have titles and animations. The complete code is as follows:

 
 

  
  
$pc = new C_PhpChartX(array(array(123, 34, 51, 22, 3)),'simplest_graph'); 
  
  
$pc->set_animate(true); 
  
  
$pc->set_title(array('text'=>'My Simplest Graph')); 
  
  
$pc->draw(); 
 
 

Code Essence

If you view the source in the browser, you will find that phpChart automatically contains many JavaScript and CSS files, including jquery. js, jquery-ui, and jqplot.js、jquery-ui.css. Although the chart is rendered in the browser using the client's JavaScript, all the code at the front end is PHP.

The reason for popularity is that JavaScript is no longer needed for me, a PHP developer, because phpChart will automatically process it for me. The following is all the JavaScript code generated when you view the source code-the result of the previous four lines of PHP code.

 
 

  
  
<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, 34, 51, 22, 3]], _simplest_graph_plot_properties); 
  
  
 
  
  
    }, 200 ); 
  
  
    }); 
  
  
</script> 
 
 

As you may also notice,"simplest_graph”Used as part of JavaScript variables, such_simplest_graph_plot_propertiesJqplot object. This is the only reason why the name I mentioned above must be unique.

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 the Renderer type

PhpChart supports bar chart, line chart, and stack chart. It supports bar chart, block chart, bubble chart, candle chart, gecko chart, meter chart, and 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, call the set_series_default function. For example, change the preceding example to a pie chart.

 
 

  
  
$pc->set_series_default(array('renderer'=>'plugin::PieRenderer')); 
 
 

Note that I use phpChart Enterprise Edition. PhpChart Lite version only supports line charts.

Array and naming conventions

There are also some noteworthy points. First, almost all parameters used in the phpChart function are an array, not all, but almost all. You only need to remember this to avoid a lot of headaches during debugging. I will briefly cover the debugging function later ). Second, the Renderer is called a "plug-in" in phpChart. Therefore, you must pass "plugin: PieRenderer" in the same way, with a double colon in the middle. For custom JavaScript, use "js: yourJavascriptFunctioName ".

Advanced phpChart: Custom JavaScript

So far, all I have shown are PHP. In most cases, phpChart can be fully used for simple PHP function calls. To make full use of phpChart, you may want to use custom JavaScript. For example, you can use phpChart to load data from JavaScript Functions and external sources.

The followingsineRendererIs a custom JavaScript function that defines the display of sine values from a group of random numbers. Then it is passed to the set_data_renderer function.

PHP:

 
 

  
  
$data1 = array(); 
  
  
$pc = new C_PhpChartX(array($data1),'basic_chart_4'); 
  
  
$pc->set_title(array('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 learn more about the set_data_renderer function, click here: http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.html

Export charts to images

At the beginning, I was troubled by this because I did not know how to export charts. 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 around:

 
 

  
  
<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 the conclusion, I would like to mention a very valuable feature of phpChart. That is, its built-in debugging function. On its website, all online example http: // phpchArt.org/examPles/) There are debugging options to enable vivid demos and two clear tabs for easy porting of the following code-JavaScript and PHP.

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

 
 

  
  
define('DEBUG', true); 
 
 

Last thought

One of the main advantages of PhpChart is that PHP programmers can use this tool to implement professional-level Web-based charts without having to gain a deep understanding of HTML5 and JavaScript.

If you are a layman in front-end programming like me, but you also need to generate interactive Web charts, you may like phpChart. The HTML5 chart examples of phpChart are listed on the following page. If you are lucky, you may not need a document-you can understand the Code directly.