ZK Html5 Canvas Charts"

From Documentation
(Created page with "{{Template:UnderConstruction}} {{Template:Smalltalk_Author| |author=Leonardo Nigro, Engineer |date=October 01, 2011 |version=1.0 }} =Introduction= This article shows how to use...")
 
Line 23: Line 23:
 
relative to the canvas drawing area. The starting position (0,0) is on the top left corner.
 
relative to the canvas drawing area. The starting position (0,0) is on the top left corner.
  
<source lang="java" line="false">
+
<source lang="java" line="true">
 +
 
 +
//To create the base component
 +
H5Chart chart=new H5Chart();
 +
chart.setWidth("300");
 +
chart.setHeight("300");
 +
 
 
</source>
 
</source>
<pre>
 
</pre>
 
  
 
=Tools=
 
=Tools=

Revision as of 22:31, 5 October 2011

WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


ZK Html5 Canvas Charts

Author
Leonardo Nigro, Engineer
Date
October 01, 2011
Version
1.0

Introduction

This article shows how to use ZKH5chart component in a ZK application.

zkh5Chart (based on h5chart javascript library) is a set of components that are useful to create and compose graphics and data charts in ZK. The library includes H5Chart element that is the canvas element where the components are drawing in, and a set of drawing tools.

Base component

H5Chart

Is the canvas where the charts and tools are drawing in. In this component (H5Chart), you can add many graphic components, so, with that in mind, you can create rich an complex charts.

Every graphic component is positionable and dimensionable (left, top, width and height support) relative to the canvas drawing area. The starting position (0,0) is on the top left corner.

1 //To create the base component
2 H5Chart chart=new H5Chart();
3 chart.setWidth("300");
4 chart.setHeight("300");

Tools

Rectangle

Draws a rectangle or a rounded corner rectangle in the chart. Can customize fill style (solid or gradient), fill color, border width, border color, border style (solid or dotted) and shadow.

Text

Draws a string in the canvas. Can customize font style, color and family, rotation and shadow.

Line

Draws a line in the canvas. Can customize line width, color, orientation and shadow. Coordinates (x,y) must be less than (x1,y1)

Circle Section

Draws a circle section in the canvas. Can customize color, border, fill style and shadow. Start angle is 0 degress (East) and rotation is clock wise.

Image

Draws an image in the canvas. Image sources can be url src or dom image element. Can resize the image

Charts

Are components that represents data in it. Mostly, they have parametrized objetive ranges and current data. At this moment only one dimension charts are implemented. Next release will include Multidimension charts (line, bars, areas, stacked, etc).

Digital

Numeric Digital Panel. Can customize every range color, animation (blink or not) animation counter , digits and decimal count When current numeric data is into the range, the panel use the range definition and displays the data.

Led

Led Matrix can display numeric and alphanumeric information in one row. Can customize every range color, message, animation (blink, Right to left movement or static) and animation counter. When current numeric data is into the range, the matrix displays the message whith the designed color and animation.

Signal

Muliple or individual signal light. Can customize every range color, animation (blink or static) and animation counter. When current numeric data is into the range, the signal is turned on with the designed color and animation.

Thermometer

Represents data in Thermometer way. Can customize range min and max.

Meter

Displays data in Ruler manner. If ranges are configured, the ruler is divided into customized ranges and current data is represented by rectangle. If ranges aren't present, current data is represented by a rectangle that fills the ruler. Can customize, colors, fonts and current data animation.

Radialmeter

Displays data in Radial Ruler manner. If ranges are configured, the ruler is divided into customized ranges and current data is represented by an arrow and arc (optional). If ranges aren't present, current data is represented by an arrow and arc (optional). Can customize, colors, fonts and current data animation (arrow and arc), ruler position and chart background style.

Pie and Ring

Values and labels defined are represented in a pie or ring chart. Can customize clock wise or radial animation, colors, fonts, and visible values. Future release will include data mask customization. This chart not include references. You can add them with the references component.

References

Displays information in graph references format. The text can be displayed in rows or flow in natural way. Can customize the width (automatic height), flow (rows or natural), background, backcolor, border color and text color, font family and size.

Vumeter

Represents data in vumeter way filling the matrix with current data provided. Can customize limit ranges colors

Appendix

  • Related Link
  • SVN
  • Download



Copyright © . This article is licensed under GNU Free Documentation License.