Table
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = 'utf-8'>
</Head>
<Body>
<Canvas id = "a_canvas" width = "300" height = "300"> </canvas>
<Script type = "text/javascript">
(Function (){
Window. addEventListener ("load", function (){
// Obtain the context
Var a_canvas = document. getElementById ('A _ canvas ');
Var context = a_canvas.getContext ("2d ");
// Draw the background
Var gradient = context. createLinearGradient (0,300 );
Gradient. addColorStop (0, "# e0e0e0 ");
Gradient. addColorStop (1, "# ffffff ");
Context. fillStyle = gradient;
Context. fillRect (0, 0, a_canvas.width, a_canvas.height );
// Draw the border
Var grid_cols = 10;
Var grid_rows = 10;
Var cell_height = a_canvas.height/grid_rows;
Var cell_width = a_canvas.width/grid_cols;
Context. lineWidth = 1;
Context. strokeStyle = "# a0a0a0 ";
// End Border description
Context. beginPath ();
// Prepare to draw a horizontal line
For (var col = 0; col <= grid_cols; col ++ ){
Var x = col * cell_width;
Context. moveTo (x, 0 );
Context. lineTo (x, a_canvas.height );
}
// Prepare to draw a vertical line
For (var row = 0; row <= grid_rows; row ++ ){
Var y = row * cell_height;
Context. moveTo (0, y );
Context. lineTo (a_canvas.width, y );
}
Context. stroke ();
}, False );
})();
</Script>
</Body>
Line chart
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = 'utf-8'>
</Head>
<Body>
<Canvas id = "a_canvas" width = "300" height = "300"> </canvas>
<Script type = "text/javascript">
(Function (){
Window. addEventListener ("load", function (){
Var data = [104,110, 98,103,];
// Obtain the context
Var a_canvas = document. getElementById ('A _ canvas ');
Var context = a_canvas.getContext ("2d ");
// Draw the background
Var gradient = context. createLinearGradient (0,300 );
Gradient. addColorStop (0, "# e0e0e0 ");
Gradient. addColorStop (1, "# ffffff ");
Context. fillStyle = gradient;
Context. fillRect (0, 0, a_canvas.width, a_canvas.height );
// Draw the border
Var grid_cols = data. length + 1;
Var grid_rows = 4;
Var cell_height = a_canvas.height/grid_rows;
Var cell_width = a_canvas.width/grid_cols;
Context. lineWidth = 1;
Context. strokeStyle = "# a0a0a0 ";
// End Border description
Context. beginPath ();
// Prepare to draw a horizontal line
For (var col = 0; col <= grid_cols; col ++ ){
Var x = col * cell_width;
Context. moveTo (x, 0 );
Context. lineTo (x, a_canvas.height );
}
// Prepare to draw a vertical line
For (var row = 0; row <= grid_rows; row ++ ){
Var y = row * cell_height;
Context. moveTo (0, y );
Context. lineTo (a_canvas.width, y );
}
Context. lineWidth = 1;
Context. strokeStyle = "# c0c0c0 ";
Context. stroke ();
Var max_v = 0;
For (var I = 0; I <data. length; I ++ ){
If (data [I]> max_v) {max_v = data [I]};
}
Max_v = max_v * 1.1;
// Convert the data into coordinates
Var points = [];
For (var I = 0; I <data. length; I ++ ){
Var v = data [I];
Var px = cell_width * (I + 1 );
Var py = a_canvas.height-a_canvas.height * (v/max_v );
Points. push ({"x": px, "y": py });
}
// Plot discount
Context. beginPath ();
Context. moveTo (points [0]. x, points [0]. y );
For (var I = 1; I <points. length; I ++ ){
Context. lineTo (points [I]. x, points [I]. y );
}
Context. lineWidth = 2;
Context. strokeStyle = "# ee0000 ";
Context. stroke ();
// Draw the coordinate chart
For (var I in points ){
Var p = points [I];
Context. beginPath ();
Context. arc (p. x, p. y, 6, 0, 2 * Math. PI );
Context. fillStyle = "# ee0000 ";
Context. fill ();
}
}, False );
})();
</Script>
</Body>