| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!doctype html>
- <html>
- <head>
- <title>Radar Chart</title>
- <script src="../Chart.js"></script>
- <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
- <style>
- canvas{
- }
- </style>
- </head>
- <body>
- <div style="width:30%">
- <canvas id="canvas" height="450" width="450"></canvas>
- </div>
- <script>
- var radarChartData = {
- labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
- datasets: [
- {
- label: "My First dataset",
- fillColor: "rgba(220,220,220,0.2)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(220,220,220,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(220,220,220,1)",
- data: [65,59,90,81,56,55,40]
- },
- {
- label: "My Second dataset",
- fillColor: "rgba(151,187,205,0.2)",
- strokeColor: "rgba(151,187,205,1)",
- pointColor: "rgba(151,187,205,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(151,187,205,1)",
- data: [28,48,40,19,96,27,100]
- }
- ]
- };
- window.onload = function(){
- window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
- responsive: true
- });
- }
- </script>
- </body>
- </html>
|
