Tutorial Canvas Data Visualisation 1: Chart.js

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

Example1. A Line Chart with Chart.js

HTML

<!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Charts with Chart.js</title>
      <script src="Chart.min.js"></script>
      <script src="chartjsScripts.js"></script>
  </head>
  <body>
  	<canvas id="myLineChart1"></canvas>
  </body>
</html>

Javascript in chartjsScripts.js

 jQuery(document).ready(function() {
  initChart2();
  });
 var chartCanvasWidth;
 var chartCanvasHeight;

function  initChart1(){
var data1= {
      labels : ["2008","2009","2010","2011","2012","2013","2014"],
      datasets : [
      {fillColor : "rgba(204,204,204,0.5)",
      strokeColor : "rgba(204,204,204,1)",
      pointColor : "rgba(204,204,204,1)",
      pointStrokeColor : "#fff",
      data : [20,87,23,81,33,70,40]
      },
      {
      fillColor : "rgba(255,102,0,0.5)",
      strokeColor : "rgba(255,102,0,1)",
      pointColor : "rgba(255,102,0,1)",
      pointStrokeColor : "#fff",
      data : [55,17,77,19,96,27,100]
      }
      ]
  }
  
var linechartOptions1 = {
  
  //Boolean - If we show the scale above the chart data 
  scaleOverlay : false,
  //Boolean - If we want to override with a hard coded scale
  scaleOverride : false,
  //** Required if scaleOverride is true **
  //Number - The number of steps in a hard coded scale
  scaleSteps : null,
  //Number - The value jump in the hard coded scale
  scaleStepWidth : null,
  //Number - The scale starting value
  scaleStartValue : null,
 //String - Colour of the scale line 
  scaleLineColor : "rgba(0,0,0,.1)",
  //Number - Pixel width of the scale line 
  scaleLineWidth : 1,
 //Boolean - Whether to show labels on the scale 
  scaleShowLabels : true,
  //Interpolated JS string - can access value
  scaleLabel : "<%=value%>",
  //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",
  //Number - Scale label font size in pixels 
  scaleFontSize : 12,
  //String - Scale label font weight style 
  scaleFontStyle : "normal",
  //String - Scale label font colour 
  scaleFontColor : "#666"
  ///Boolean - Whether grid lines are shown across the chart
  scaleShowGridLines : true,
  //String - Colour of the grid lines
  scaleGridLineColor : "rgba(0,0,0,.05)",
  //Number - Width of the grid lines
  scaleGridLineWidth : 1
  //Boolean - Whether the line is curved between points
  bezierCurve : true,
  //Boolean - Whether to show a dot for each point
  pointDot : true,
  //Number - Radius of each point dot in pixels
  pointDotRadius : 3,
  //Number - Pixel width of point dot stroke
  pointDotStrokeWidth : 1,
  //Boolean - Whether to show a stroke for datasets
  datasetStroke : true,
  //Number - Pixel width of dataset stroke
  datasetStrokeWidth : 2,
  //Boolean - Whether to fill the dataset with a colour
  datasetFill : true,
  //Boolean - Whether to animate the chart
  animation : true,
 //Number - Number of animation steps
  animationSteps : 60,
  //String - Animation easing effect
  animationEasing : "easeOutQuart",
 //Function - Fires when the animation is complete
  onAnimationComplete : null
   }
   
 var canvas=jQuery("#myLineChart1");
  //Get context with jQuery - using jQuery's .get() method.
  var ctx1 = canvas.get(0).getContext("2d");
  
  //Make the Canvas element  responsive for desktop, tablet en smartphone
  var canvasParentWidth=jQuery(canvas).parent().width();
  chartCanvasWidth = ctx1.canvas.width  = canvasParentWidth;
  chartCanvasHeight = ctx1.canvas.height  = 288;
 
 new Chart(ctx1).Line(data1,linechartOptions1); 
}

Example2. A Polar Chart with Chart.js

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

HTML

<!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Charts with Chart.js</title>
      <script src="Chart.min.js"></script>
      <script src="chartjsScripts.js"></script>
  </head>
  <body>
  	<canvas id="myPolarChart2"></canvas>
  </body>
</html>

Javascript in chartjsScripts.js

 jQuery(document).ready(function() {
	initChart2();
});
var chartCanvasWidth;
var chartCanvasHeight;

function  initChart2(){
var data2 = [
    {
    value : 84,
    color: "#ff6600"
    },
    {
    value : 44,
    color: "#E1D4C0"
    },
    {
    value : 74,
    color: "#154890"
    },
    {
    value : 54,
    color: "#CDBFAC"
    },
    {
    value :74,
    color: "#6699FF"
    },
    {
    value : 39,
    color: "#F5EDE3"
    }
]

var polarchartOptions2 = {
  //Boolean - If we show the scale above the chart data 
  scaleOverlay : false,
  //Boolean - If we want to override with a hard coded scale
  scaleOverride : false,
  //** Required if scaleOverride is true **
  //Number - The number of steps in a hard coded scale
  scaleSteps : null,
  //Number - The value jump in the hard coded scale
  scaleStepWidth : null,
  //Number - The scale starting value
  scaleStartValue : null,
 //String - Colour of the scale line 
  scaleLineColor : "rgba(0,0,0,.1)",
  //Number - Pixel width of the scale line 
  scaleLineWidth : 1,
 //Boolean - Whether to show labels on the scale 
  scaleShowLabels : true,
  //Interpolated JS string - can access value
  scaleLabel : "<%=value%>",
  //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",
  //Number - Scale label font size in pixels 
  scaleFontSize : 12,
  //String - Scale label font weight style 
  scaleFontStyle : "normal",
  //String - Scale label font colour 
  scaleFontColor : "#666"
  ///Boolean - Whether grid lines are shown across the chart
  scaleShowGridLines : true,
  //String - Colour of the grid lines
  scaleGridLineColor : "rgba(0,0,0,.05)",
  //Number - Width of the grid lines
  scaleGridLineWidth : 1
  //Boolean - Whether the line is curved between points
  bezierCurve : true,
  //Boolean - Whether to show a dot for each point
  pointDot : true,
  //Number - Radius of each point dot in pixels
  pointDotRadius : 3,
  //Number - Pixel width of point dot stroke
  pointDotStrokeWidth : 1,
  //Boolean - Whether to show a stroke for datasets
  datasetStroke : true,
  //Number - Pixel width of dataset stroke
  datasetStrokeWidth : 2,
  //Boolean - Whether to fill the dataset with a colour
  datasetFill : true,
  //Boolean - Whether to animate the chart
  animation : true,
 //Number - Number of animation steps
  animationSteps : 60,
  //String - Animation easing effect
  animationEasing : "easeOutQuart",
 //Function - Fires when the animation is complete
  onAnimationComplete : null
  }
  
 var canvas=jQuery("#myPolarChart2");
  //Get context with jQuery - using jQuery's .get() method.
  //This will get the first returned node in the jQuery collection.
  var ctx2 = canvas.get(0).getContext("2d");
  
  //Make the Canvas element  responsive for desktop, tablet en smartphone
  var canvasParentWidth=jQuery(canvas).parent().width();
  var chartCanvasWidth = ctx2.canvas.width  = canvasParentWidth;
  var chartCanvasHeight = ctx2.canvas.height  = 288;
 

 new Chart(ctx2).PolarArea(data2,polarchartOptions2); 



Example3. A Bar Chart with Chart.js

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

HTML

<!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Charts with Chart.js</title>
      <script src="Chart.min.js"></script>
      <script src="chartjsScripts.js"></script>
  </head>
  <body>
  	<canvas id="myBarChart3"></canvas>
  </body>
</html>

Javascript in chartjsScripts.js

 jQuery(document).ready(function() {
  initChart3();
});
 
function  initChart3(){
  
var data3 = {
  labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
  datasets : [
  {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  data : [65,59,90,81,56,55,40,13,63,90,77,44,58,48]
  },
  {
  fillColor : "rgba(151,187,205,0.5)",
  strokeColor : "rgba(151,187,205,1)",
  data : [28,48,40,19,96,27,100,23,41,45,21,82,23,96]
  }
  ]
}

var barchartOptions3 = {
  
  //Boolean - If we show the scale above the chart data 
  scaleOverlay : false,
    //Boolean - If we want to override with a hard coded scale
  scaleOverride : false,
    //** Required if scaleOverride is true **
  //Number - The number of steps in a hard coded scale
  scaleSteps : null,
  //Number - The value jump in the hard coded scale
  scaleStepWidth : null,
  //Number - The scale starting value
  scaleStartValue : null,
 //String - Colour of the scale line 
  scaleLineColor : "rgba(0,0,0,.1)",
    //Number - Pixel width of the scale line 
  scaleLineWidth : 1,
 //Boolean - Whether to show labels on the scale 
  scaleShowLabels : true,
    //Interpolated JS string - can access value
  scaleLabel : "<%=value%>",
    //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",
    //Number - Scale label font size in pixels 
  scaleFontSize : 12,
    //String - Scale label font weight style 
  scaleFontStyle : "normal",
    //String - Scale label font colour 
  scaleFontColor : "#666", 
    ///Boolean - Whether grid lines are shown across the chart
  scaleShowGridLines : true,
    //String - Colour of the grid lines
  scaleGridLineColor : "rgba(0,0,0,.05)",
    //Number - Width of the grid lines
  scaleGridLineWidth : 1, 
 //Boolean - If there is a stroke on each bar 
  barShowStroke : true,
    //Number - Pixel width of the bar stroke 
  barStrokeWidth : 2,
    //Number - Spacing between each of the X value sets
  barValueSpacing : 5,
    //Number - Spacing between data sets within X values
  barDatasetSpacing : 1,
    //Boolean - Whether to animate the chart
  animation : true,
 //Number - Number of animation steps
  animationSteps : 60,
    //String - Animation easing effect
  animationEasing : "easeOutQuart",
 //Function - Fires when the animation is complete
  onAnimationComplete : null
}

 var canvas=jQuery("#myBarChart3");
  //Get context with jQuery - using jQuery's .get() method.
  //This will get the first returned node in the jQuery collection.
  var ctx3 = canvas.get(0).getContext("2d");
  
  //Make the Canvas element  responsive for desktop, tablet en smartphone
  var canvasParentWidth=jQuery(canvas).parent().width();
  var chartCanvasWidth = ctx3.canvas.width  = canvasParentWidth;
  var chartCanvasHeight = ctx3.canvas.height  = 288;
 
 new Chart(ctx3).Bar(data3,barchartOptions3); 
}



Next tutorial

Leave a comment