Lesson: lesson-chart-js

This example renders a chart using Javascript with help of the chart add-on chart.js (http://chartjs.org).

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
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
    <head>
        <title>Radar Chart</title>
        <script src="Chart.js"></script>
        <style>
            /* workaround */
            .chartjs-hidden-iframe {
                visibility: hidden;
            }
        </style>
        <script>
            var data = {
                labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                datasets: [
                    {
                        label: "My First dataset",
                        backgroundColor: "rgba(179,181,198,0.2)",
                        borderColor: "rgba(179,181,198,1)",
                        pointBackgroundColor: "rgba(179,181,198,1)",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(179,181,198,1)",
                        data: [65, 59, 90, 81, 56, 55, 40]
                    },
                    {
                        label: "My Second dataset",
                        backgroundColor: "rgba(255,99,132,0.2)",
                        borderColor: "rgba(255,99,132,1)",
                        pointBackgroundColor: "rgba(255,99,132,1)",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(255,99,132,1)",
                        data: [28, 48, 40, 19, 96, 27, 100]
                    }
                ]
            };

            window.onload = function(){
                window.myRadar = new Chart('canvas', {
                    type: 'radar',
                    data: data
                });
            }
        </script>
    </head>
    <body>
        <div>
            <canvas id="canvas" height="600" width="600"></canvas>
        </div>
    </body>
</html>