Data on radar chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Data on radar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w  w w .jav  a  2 s.  c  o m*/
var data = [{"member_id":"144","firstName":"Dan","lastName":"Barrett","score_1":"4","score_2":"2","score_3":"3","score_4":"5","score_5":"1","score_6":"3","score_7":"5","score_8":"4"},{"member_id":"145","firstName":"Jon","lastName":"Smith","score_1":"3","score_2":"4","score_3":"1","score_4":"2","score_5":"1","score_6":"2","score_7":"3","score_8":"4"},{"member_id":"146","firstName":"Dan","lastName":"Barrett","score_1":"1","score_2":"2","score_3":"1","score_4":"1","score_5":"4","score_6":"1","score_7":"4","score_8":"3"}]
$(document).ready(function(){
            console.log(data);
            var score_1 = [];
            var score_2 = [];
            for (var i in data) {
                 score_1.push(data[i].score_1);
                 score_2.push(data[i].score_2);
            }
                  console.log(score_1);
            console.log(score_2);
            var chartata = {
                labels: [
                 "Strategic Development and Ownership",
                 "Driving change through others",
                 "Exec Disposition",
                 "Commercial Acumen",
                 "Develops High Performance Teams",
                 "Innovation and risk taking",
                 "Global Leadership",
                 "Industry Leader"
                 ],
                datasets : [
                    {
                          label: "user 1",
                          backgroundColor: "rgba(0,0,0,0)",
                          borderColor: "#B71C1C",
                          data: score_1,
                    },
                    {
                          label: "user 2",
                          backgroundColor: "rgba(0,0,0,0)",
                          borderColor: "#B71C1C",
                          data: score_2
                    },
                ]
            };
            var ctx = $("#mycanvas");
            var LineGraph = new Chart(ctx, {
                type: 'radar',
                data: chartata,
                animationEasing: 'linear'
            });
});
    }

      </script> 
   </head> 
   <body> 
      <div style="max-width: 500px;"> 
         <canvas id="mycanvas" class="container"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials