HTML 5

Client Side Chart Widget in HTML5: Part 6 (Radar Chart)

Introduction

I hope you have read my first two articles in this series that explains the loading of Bar Charts, Pie Charts, Line Charts, Doughnut Charts and Polar Area Charts. Please see the following links.

Now we will explain a client Radar Chart widget in HTML5.

Background

Please download the necessary files here http://www.chartjs.org/.

Using the code

A simple HTML

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title> Radar Chart Using Chart.js</title>  
  5. </head>  
  6. <body></body>  
  7. </html>  
Included JavaScript file
  1. <script src="Chart.js"></script>  
Call the Chart Function
  1. window.onload = function () {  
  2.     var canvasObject = document.getElementById("myChart").getContext("2d");  
  3.     window.myRadar = new Chart(canvasObject).Radar(radarChartData, {  
  4.         responsive: true  
  5.     });  
  6. }  
Here we are loading the chart in the myChart.

As you can see in the preceding code, radarChartData is the data we will load into the chart.
  1. var radarChartData = {  
  2.         labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  3.         datasets: [  
  4.             {  
  5.                 label: "Dataset 1",  
  6.                 fillColor: "#66FFFF",  
  7.                 strokeColor: "#800000",  
  8.                 pointColor: "rgba(220,220,220,1)",  
  9.                 pointStrokeColor: "#000",  
  10.                 pointHighlightFill: "#FF1919",  
  11.                 pointHighlightStroke: "rgba(220,220,220,1)",  
  12.                 data: [65, 59, 90, 81, 56, 55, 40]  
  13.             },  
  14.             {  
  15.                 label: "Dataset 2",  
  16.                 fillColor: "#0033CC",  
  17.                 strokeColor: "#800000",  
  18.                 pointColor: "rgba(151,187,205,1)",  
  19.                 pointStrokeColor: "#000",  
  20.                 pointHighlightFill: "#FF1919",  
  21.                 pointHighlightStroke: "rgba(151,187,205,1)",  
  22.                 data: [28, 48, 40, 19, 96, 27, 100]  
  23.             }  
  24.         ]  
  25.     };  
Properties 
  • Labels
  • Datasets
    1. label ( label for your dataset)
    2. fillColor
    3. strokeColor
    4. pointColor
    5. pointStrokeColor
    6. pointHighlightFill
    7. pointHighlightStroke
    8. data

Here you can change the properties as you want.

Complete HTML

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Radar Chart Using Chart.js</title>  
  5.     <script src="Chart.js"></script>  
  6.     <script>  
  7.         var radarChartData = {  
  8.             labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],  
  9.             datasets: [  
  10.                 {  
  11.                     label: "Dataset 1",  
  12.                     fillColor: "#66FFFF",  
  13.                     strokeColor: "#800000",  
  14.                     pointColor: "rgba(220,220,220,1)",  
  15.                     pointStrokeColor: "#000",  
  16.                     pointHighlightFill: "#FF1919",  
  17.                     pointHighlightStroke: "rgba(220,220,220,1)",  
  18.                     data: [65, 59, 90, 81, 56, 55, 40]  
  19.                 },  
  20.                 {  
  21.                     label: "Dataset 2",  
  22.                     fillColor: "#0033CC",  
  23.                     strokeColor: "#800000",  
  24.                     pointColor: "rgba(151,187,205,1)",  
  25.                     pointStrokeColor: "#000",  
  26.                     pointHighlightFill: "#FF1919",  
  27.                     pointHighlightStroke: "rgba(151,187,205,1)",  
  28.                     data: [28, 48, 40, 19, 96, 27, 100]  
  29.                 }  
  30.             ]  
  31.         };  
  32.   
  33.         window.onload = function () {  
  34.             var canvasObject = document.getElementById("myChart").getContext("2d");  
  35.             window.myRadar = new Chart(canvasObject).Radar(radarChartData, {  
  36.                 responsive: true  
  37.             });  
  38.         }  
  39.   
  40.     </script>  
  41. </head>  
  42. <body>  
  43.     <div>  
  44.         Radar Area Chart @ <a href="www.sibeeshpassion.com">www.sibeeshpassion.com</a>  
  45.         <canvas id="myChart"></canvas>  
  46.     </div>  
  47. </body>  
  48. </html>  
Conclusion

I hope you can now create your own chart.

Output

Radar Chart

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs