chart-js

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

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  ERROR
does not work
Antennahouse  ERROR
does not work, no Javascript support
Weasyprint  ERROR
does not work, no Javascript support
PagedJS  ERROR
does not work, no Javascript support
Typeset.sh  ERROR
does not work, no Javascript support

HTML input

<!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>