PHPTutorial12

From Steema Software Reference Wiki
Jump to: navigation, search

Tchart php.png

Contents page
Previous


Tutorial 12 - Javascript/HTML5 Charts

How to create static and live HTML5 Charts on the client page

Introduction

TeeChart for PHP offers you the possibility to write your Charts to the browser page in native HTML5. There are two modes, Static and Live.

Static writes the chart as a primitive level series of canvas commands, faithfully reproducing each line, primitive shape and text of your chart as a series of native HTML5 canvas instructions. This export format can reproduce every chart in the TeeChart PHP Library just as it would as a JPEG or PNG format image.

Live writes the chart as a series of addressable HTML5 elements. That allows animation and interactivity to applied to the Chart in native HTML5 Javascript format. This export mode doesn't support all chart types, see descriptive section below for more details, but does allow for the addition of interactive tools and supports mousedrag zoom and scroll on the page.

Static Export

Exporting a Chart to static HTML5 will generate a file o text which contains the code necessay for the browser to understand and show the Chart. The appearance obtained is almost identical to the Chart generated with GDGraphics.

How to export to a static HTML5 chart

The step necessary to export a Chart to HTML5 is simple, so simple in fact, it consist of only one line of code :


include "../../../../sources/TChart.php";  
     $chart1 = new TChart(500,350);
     $chart1->getAspect()->setView3D(false);
     $chart1->getHeader()->setText("HTML5 Demo");
     $chart1->getPanel()->getGradient()->setVisible(false); 
     $chart1->getPanel()->setColor(Color::WHITE()); 

     // Add Series to the Chart
     $line = new Line($chart1->getChart());
     $line->fillSampleValues(6);
     $line->setColor(Color::DARK_GRAY());
     $line->getLinePen()->setWidth(3);
     $line->getPointer()->setVisible(true);
     $line->getPointer()->setStyle(PointerStyle::$CIRCLE);
     $chart1->getChart()->getExport()->getImage()->getHTML5()->save($path."\\TChart.html");           

This code will create an html file containing the lines necessary in order to execute or html 5 Chart.

You can find an example of how to use it in the Features Demo found in the Exports -> HTML5 -> HTML5 export folder.

Live HTML5 Charts

As we have seen in Tutorial 11, the latest version of TeeChart foor PHP includes a version of TeeChart JavaScript within its source code, which allows us on the one hand to use the javascript version independently to produce the Chart in our browser directly using javascript code. Or on the ohter hand, we can continue using our PHP code to create the Chart and then export it to a javascript Chart, thereby obtaining a javascript Chart on our live page without actually having to use a single line of javascript code.

Not all Series types are available for this type of export. In the Features Demo you can find an example whereall the Series types available are shown.New Series types will be incorporated with the release of future versions.

An example can be found in theFeatures demo in Features ->JScript -> TeeChartJavaScript

Other working examples where different types os Series are used can be found in the Features demo in Features ->JScript -> Series -> …

How to export to a live HTML5 chart

We have two options open to us when we eport our Chart to javascript (live)

We can export the Chart to a file in which we generate an HTML file with the necessary code for our browser to show the code in javascript :

$chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html', $chartName);

Or we can export directly to a stream which will allow us to draw the Chart directly in the browser without having to save the code in a file beforehand.

echo $chart1->getChart()->getExport()->getImage()->getJavaScript()->Render($chartName)->toString();

The $chartName parameter is optional. It will be used as the id when we need to use the name of the Chart in the javascript code used. If this parameter isn't included, "chart1" will be used by default.

You can find an working example in the Features demo in the JScript folder.

Below is an example with full code :

<?php
     // JavaScript Export Example that shows the use of TipTool
    
     //Includes
     include "../../../sources/TChart.php";   
     // Assign Header text
     $chart1 = new TChart(500,350);                              

     // Add Series to the Chart
     $line = new Line($chart1->getChart());
     $line->fillSampleValues(6);
     $line->getPointer()->setVisible(true);     

     $tipTool = new ToolTip($chart1->getChart());
     $tipTool->setSeries($line);     
     $tipTool->getFont()->setName('Tahoma');
     $tipTool->getFont()->setSize(20);
     $tipTool->getFont()->setColor(Color::RED());     

     $tipTool->setOnShow("
       function(tool,series,index) { scaling=2; poindex=index; }     
     ");     

     $tipTool->setOnHide("
       function() { scaling=0; poindex=-1; }
     ");     

     $tipTool->setOnGetText('
       function(tool,text) { return "Text:\n"+text; }
     ');

     // In case you want to save to a file
     $chart1->getChart()->getExport()->getImage()->getJavaScript()->SaveToFile('jschartToolTip.html');      
?>     

<?php 
 echo  $chart1->getChart()->getExport()->getImage()->getJavaScript()->Render()->toString();    
?>


Javascript/HTML5 Chart Tools

The functionality of JavaScript included in the PHP version allow us to add various Tools to our Chart easily. These can only be used when exporting a live Chart. The Tools available are:

Annotation

This tool allows us to add one or various annotations to our Chart. You can se the properties which are available in the Help Library. You can find an example in the Features demo in Features ->JScript -> Annotation

     $chart1->getChart()->getTools()->add(new Annotation());
     $chart1->getChart()->getTools()->getTool(0)->setText("Annotation");
     $chart1->getChart()->getTools()->getTool(0)->setLeft(100);
     $chart1->getChart()->getTools()->getTool(0)->setTop(100);

Cursor

If we use the Cursor tool, we can show different cursors in the Chart. These can be customised to your liking by changing properties like colour, width and length and making it follow the movements on the mouse.

It incorporates an event (assigned as a property) OnChange which allows us to add javascript within our page.Change of the This will be assigned as text, and will be executed in the event OnChange of the Cursor.

A example can be found in the Features demo in Features ->JScript -> Cursor

Scroller

The Scroller Tool lets us select a specific area of the Chart when it contains a lot of data and is difficult to appreciate small details. We can specify the desired size of the chart with all the data, and within this area specify what we want to see in detail, which will be shown in another chart. We have the option to enlarge or move this selected area easily with the mouse.

Apart from the tool properties which allow you to customize size, select areas, among others, it also includes the event (assigned as property) OnChanging, which allows you to add javascript code within your page. This is assigned as text, and will be implemented in the Cursor OnChanging event.

You can find an example in the Features demo in Features ->JScript -> Scroller

Slider

The Slider Tool has a similar function to the Scroller Tool, allowing us to select a maximum and minimum value to be displayed in our Chart, but with the difference that it doesn't create another chart with all the data, but adds a slider component in the position assigned by us instead. This allows us to move through all the chart data with the mouse.

It also incorporates the property OnChanging event.

You can find an example in the Features demo in Features ->JScript -> Slider

ToolTip

ToolTip Tool is an essential tool for many types of chart. It allows you to display a label containing a text (eg. the value) when the point of the mouse cursor passes over a specified point and making it disappear as the cursor moves away from the pointhovering above the same point, and hide to get away from the point.

This allows us to assign different values ​​for OnShow events, and OnGetText OnHide using the same properties.

You can find an example in the Features demo in Features ->JScript -> ToolTip


Use Custom code to enhance the Chart on the page

Since the PHP version allows us to easily add javascript code to our pages, adding the reference to teechart.js gives us the option to improve or customize our javascript Chart using javascript.

Inside the folder "Docs" of TeeChart for PHP you will find the necessary documentation of TeeChart javascript, together with the functions in the event that the developer wishes to use jscript code into their pages.




PREVIOUS


© 1998-2019 Steema Software SL. All rights reserved.