HTML5 Canvas-based linear area chart tutorial

We've seen a lot of Web diagrams implemented in jquery before, and some of them are more practical. Today we introduce a linear area chart application based on HTML5 canvas, which allows you to use multiple sets of data to display simultaneously, and to present the data results in a linear graph, the regions formed between each data are represented in different colors, and can be seen in the demo demo below.

You can also view the online demo here

Let's take a brief look at the process of implementing this HTML5 chart and the source code.

HTML code:

<id= "CVS"  width= "  height= " >[No Canvas support]</canvas>

A simple canvas tag, our chart is drawn on canvas.

Since this chart is based on RGraph, we will also refer to the relevant JS script of RGraph and the jquery class library:

<Scriptsrc= "../libraries/rgraph.common.core.js" ></Script><Scriptsrc= "../libraries/rgraph.common.effects.js" ></Script><Scriptsrc= "../libraries/rgraph.common.dynamic.js" ></Script><Scriptsrc= "../libraries/rgraph.common.tooltips.js" ></Script><Scriptsrc=".. /libraries/rgraph.drawing.poly.js " ></Script><Scriptsrc=".. /libraries/rgraph.line.js " ></Script><Scriptsrc=".. /libraries/jquery.min.js " ></Script>

And finally the JavaScript code:

varD1 = []; varD2 = []; varval = 47; //Create the Data             for(vari=0; i<100; i+=1) D1[i] = Rgraph.random (45,55);  for(vari=0; i<100; i+=1) D2[i] = Rgraph.random (25,35); varline =NewRgraph.line (' CVS ', D1, D2). Set (' Background.grid.autofit.numhlines ', 10)                . Set (' Hmargin ', 10)                . Set (' Filled ',true)                . Set (' FillStyle ', ' Red ')                . Set (' Filled.range ',true)                . Set (' Filled.range.threshold ', 40)                . Set (' Filled.range.threshold.colors ', [' Rgba (255,0,0,0.5) ', ' Rgba (0,0,255,0.5) '])                . Set (' Labels ', [' Q1 ', ' Q2 ', ' Q3 ', ' Q4 '])                . Set (' Colors ', [' gray ', ' gray '])                . Set (' Numxticks ', 8)                . Set (' LineWidth ', 1)                . Set (' Ymax ', 60) RGraph.Effects.Line.jQuery.Trace (line); varcoords = []             for(vari=0; i< (LINE.COORDS.LENGTH/2); I+=1) {Coords.push (Line.coords[i])} for(varI= (line.coords.length-1); I>= (LINE.COORDS.LENGTH/2); I-=1) {Coords.push (Line.coords[i])}varPoly =NewRGraph.Drawing.Poly (' CVS ', coords). Set (' FillStyle ', ' Rgba (0,0,0,0) ')                . Set (' Strokestyle ', ' Rgba (0,0,0,0) ')                . Set (' ToolTips ', [' The range chart '])                . Set (' Highlight.fill ', ' Rgba (255,255,255,0.3) ')                . Draw ();

The main is to initialize some data, RGraph is a very good HTML5 chart framework, more rgraph examples we will continue to explain in the future. Source code Download >>