HTML5 canvas chart report development

The operations on offline databases and offline files, session mechanism control, client cross-domain data synchronization, and interaction with the server we mentioned earlier, it allows users to perform normal operations without a network or disconnected from the server. However, our offline system customers include many specific groups, such as finance, accounting, and data extraction personnel. Therefore, we need a strong support for data reports and charts, make them more intuitive.

 

Currently, many chart development components are available.

There is a Silverlight-based visifire, which is my favorite chart component before using MVC 3.0 for development. There are three main reasons I Like It (visifire ):

Open Source: I believe this is what many programmers like most.

Single API to both Silverlight & WPF: I believe this is what many client application developers like most.

Quick Start: the startup speed is very fast, and it is never lost to some lightweight chart plug-ins of pure scripts. It is also developed based on Silverlight to provide visual impact.

 

Previously, I used hight charts in MVC 3.0. I have to admit that it is easy to use. It has rich cases, complete documents, and can be used quickly because it is based on pure scripts, there is basically no problem in project porting. Unlike Silverlight-based components, you must ensure that Silverlight must be installed on the server.

 

In HTML5-based application development, the HTML5 cavans API provides a method for drawing graphs using JavaScript, making it easier to develop data charts, as a result, many script libraries based on HTML5 cavans emerged. I have used JavaScript/html5.
Charts, zingchart

Among them, zingchart is my favorite, because it is the first chart library that can present charts in flash and HTML5 canvas. The Flash version is basically supported in all browsers.

 

Let's take a look at the HTML5 version of zingchart, because other colleagues in the company also want to use it, so we made a small second-level encapsulation. The encapsulation here is mainly to extract the method, the data binding is separated and called by passing parameters. The reason for this is that the data on our page is mainly stored in two-dimensional arrays and then presented in tables, the values in the two-dimensional array correspond to the data of the horizontal and vertical axes. The JS library code is as follows:

View code

The page call example is as follows:

View code

/* Use pie chart */var fields = new array ", "August 100", "August 120", "August"); VaR values = new array ", "35", "88", "66", "56", "79", "115", "42", "100", "110 ", "80"); var datas = BC. makepiechart ("Monthly Data Report", fields, values); zingchart. render ({'id': 'g1', 'width': 500, 'height': 300, 'data': datas });

View
Code

/* Use a line chart */var Title = "monthly data line chart"; var xtitle = "2012 data reports for each month"; var ytitle = "report data "; vaR fields = new array ('east', 'west', 'south', 'North'); var xvalue = http://www.cnblogs.com/wzh2010/archive/2012/09/02/new array ('January ', 'February ', 'October ', 'february 1'); var value1 = [12, 15, 55, 14, 22, 23, 64, 32, 27, 0, 0]; var value2 = [23, 17, 35, 19, 28, 32, 12, 59, 75, 45, 28, 72]; var value3 = [35, 45, 25, 29, 33, 49, 42, 42, 12, 36, 45, 58]; var value4 = [17, 16, 55, 65, 22, 46, 64, 32, 47, 12, 38, 40]; VaR values = new array (value1, value2, value3, value4); zingchart. render ({'id': 'g2', 'width': 600, 'height': 250, 'data': BC. makelinechart (title, xtitle, ytitle, fields, values, xvalue) // 'data': makelinechart (title, xtitle, ytitle, fields, values) // do not write xvalue, the horizontal axis value is automatically generated });

View code

/* Use a bar chart */var Title = "monthly data Bar Chart"; var xtitle = "2012 months"; var ytitle = "report "; vaR fields = new array ('east', 'west', 'south', 'North'); var xvalue = http://www.cnblogs.com/wzh2010/archive/2012/09/02/new array ('January ', 'February ', 'October ', 'August 1'); var value1 = [12, 15, 55, 14, 22, 23, 64, 32, 47, 2, 2]; var value2 = [23, 17, 35, 19, 28, 32, 12, 59, 75, 45, 28, 72]; var value3 = [35, 45, 25, 29, 33, 49, 42, 42, 12, 36, 45, 58]; var value4 = [17, 16, 55, 65, 22, 46, 64, 32, 47, 12, 38, 40]; VaR values = new array (value1, value2, value3, value4); zingchart. render ({'id': 'g3 ', 'width': 860, 'height': 300, 'data': BC. makebarchart (title, xtitle, ytitle, fields, values, xvalue) // 'data': makebarchart (title, xtitle, ytitle, fields, values) // do not write xvalue, the horizontal axis value is automatically generated });

 

In fact, it was quite unreasonable to find that the data in this chart is in JSON format, so it is better to directly transmit the JSON strings in the corresponding format, in order to display the data table on the page, we convert the previous JSON data into a two-dimensional array, and then convert it into a JSON string, which is packed and unpacked, causing no performance consumption.

Note that zingchart cannot be used for commercial purposes. If you want to use it for commercial purposes, you must pay a certain amount of fee. This is a pitfall. Our company has bought it. If you are doing your own research, you can also go to the trial version. This is easy to crack. It is actually a bunch of scripts with a license. js in it. Next, you know, hey...

Because I use the English version and do not support Chinese, I made localization here. The right-click menu shows Chinese.

Source code download: html5_charts