123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <!doctype html>
- <html>
- <head>
- <title>Polar Area Chart</title>
- <script src="../Chart.js"></script>
- </head>
- <body>
- <div id="canvas-holder" style="width:30%">
- <canvas id="chart-area" width="300" height="300"/>
- </div>
- <script>
- var polarData = [
- {
- value: 300,
- color:"#F7464A",
- highlight: "#FF5A5E",
- label: "Red"
- },
- {
- value: 50,
- color: "#46BFBD",
- highlight: "#5AD3D1",
- label: "Green"
- },
- {
- value: 100,
- color: "#FDB45C",
- highlight: "#FFC870",
- label: "Yellow"
- },
- {
- value: 40,
- color: "#949FB1",
- highlight: "#A8B3C5",
- label: "Grey"
- },
- {
- value: 120,
- color: "#4D5360",
- highlight: "#616774",
- label: "Dark Grey"
- }
- ];
- window.onload = function(){
- var ctx = document.getElementById("chart-area").getContext("2d");
- window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
- responsive:true
- });
- };
- </script>
- </body>
- </html>
|