| Contents page
How to create static and live HTML5 Charts on the client page
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.
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
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.
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
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.
You can find an working example in the Features demo in the JScript folder.
Below is an example with full code :
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);
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.
A example can be found in the Features demo in Features ->JScript -> Cursor
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.
You can find an example in the Features demo in Features ->JScript -> Scroller
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 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
© 1998-2013 Steema Software SL. All rights reserved.