client-freqwatch/Chart.js/samples/radar.html

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <title>Radar Chart</title>
   5                 <script src="../Chart.js"></script>
   6                 <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
   7                 <style>
   8                         canvas{
   9                         }
  10                 </style>
  11         </head>
  12         <body>
  13                 <div style="width:30%">
  14                         <canvas id="canvas" height="450" width="450"></canvas>
  15                 </div>
  16
  17
  18         <script>
  19         var radarChartData = {
  20                 labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  21                 datasets: [
  22                         {
  23                                 label: "My First dataset",
  24                                 fillColor: "rgba(220,220,220,0.2)",
  25                                 strokeColor: "rgba(220,220,220,1)",
  26                                 pointColor: "rgba(220,220,220,1)",
  27                                 pointStrokeColor: "#fff",
  28                                 pointHighlightFill: "#fff",
  29                                 pointHighlightStroke: "rgba(220,220,220,1)",
  30                                 data: [65,59,90,81,56,55,40]
  31                         },
  32                         {
  33                                 label: "My Second dataset",
  34                                 fillColor: "rgba(151,187,205,0.2)",
  35                                 strokeColor: "rgba(151,187,205,1)",
  36                                 pointColor: "rgba(151,187,205,1)",
  37                                 pointStrokeColor: "#fff",
  38                                 pointHighlightFill: "#fff",
  39                                 pointHighlightStroke: "rgba(151,187,205,1)",
  40                                 data: [28,48,40,19,96,27,100]
  41                         }
  42                 ]
  43         };
  44
  45         window.onload = function(){
  46                 window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
  47                         responsive: true
  48                 });
  49         }
  50
  51         </script>
  52         </body>
  53 </html>