Lesson: lesson-flotr2-js

This example creates a chart using HTML5 and the Flotr2 JS chart engine (http://www.humblesoftware.com/flotr2/).

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
ERROR
Download
does not work
Antennahouse
ERROR
Download
does not work
Vivliostyle
ERROR
Download
does not work

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 15cm;
        height: 15cm;
        margin: 8px auto;
      }
    </style>
  </head>
  <body>
    <div id="container" style="display: block"></div>
    <!--[if IE]>
    <script type="text/javascript" src="path/to/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="flotr2.min.js"></script>
    <script type="text/javascript">
      (function () {
        var
          container = document.getElementById('container'),
          data = [],
          graph, i;

        // Sample the sine function
        for (i = 0; i < 4 * Math.PI; i += 0.2) {
          data.push([i, Math.sin(i)]);
        }

        // Draw Graph
        graph = Flotr.draw(container, [ data ], {
          yaxis : {
            max : 2,
            min : -2
          }
        });
      })();
    </script>
  </body>
</html>