Linear Area Chart tutorial Based on HTML5 Canvas

Linear Area Chart tutorial Based on HTML5 Canvas
Next we will briefly introduce the process and source code for implementing this HTML5 chart. HTML code: <canvas id = "cvs" width = "600" height = "250"> [No canvas support] </canvas> A simple canvas tag, our charts are drawn on the canvas. Since this chart is based on RGraph, we also need to reference the js script of RGraph and the jquery Class Library: copy the Code <script src = ".. /libraries/RGraph. common. core. js "> </script> <script src = ".. /libraries/RGraph. common. effects. js "> </script> <script src = ".. /libraries/RGraph. common. dynamic. js "> </script> <script src = ".. /libraries/RGraph. common. tooltips. js "> </script> <script src = ".. /libraries/RGraph. drawing. poly. js "> </script> <script src = ".. /libraries/RGraph. line. js "> </script> <script src = ".. /libraries/jquery. min. js "> </script>: copy the code var d1 = []; var d2 = []; var val = 47; // Create the data for (var I = 0; I <100; I + = 1) d1 [I] = RGraph. random (100); for (var I = 0; I <; I + = 1) d2 [I] = RGraph. random (25, 35); var line = new RGraph. line ('cvs ', d1, d2 ). set ('background. grid. autofit. numhlines ', 10 ). set ('hmargin ', 10 ). set ('filened', true ). set ('fillstyle', 'red '). set ('filled. range ', true ). set ('filled. range. threshold ', 40 ). set ('filled. range. threshold. colors ', ['rgba (0.5, 0, 255)', 'rgba (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); var coords = [] for (var I = 0; I <(line. coords. length/2); I + = 1) {coords. push (line. coords [I])} for (var I = (line. coords. length-1); I> = (line. coords. length/2); I-= 1) {coords. push (line. coords [I])} var poly = new RGraph. drawing. poly ('cvs ', coords ). set ('fillstyle', 'rgba (0, 0, 0, 0 )'). set ('strokestyle', 'rgba (0, 0, 0, 0 )'). set ('tooltids', ['The range chart']). set ('highlight. fill ', 'rgba (255,255,255, 0.3 )'). draw ();