title: Displaying a chart using Chart.js
body: <p>I'm pretty new to JavaScript and HTML5. I'm trying to print a normal line chart onto canvas using Chart.js. I followed the step by step guide on their website, but am unable to make the graph show. </p>
  
  <p>This is the current code:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;CHARTS&lt;/title&gt;
  &lt;script src="../../../Downloads/Chart.js-master/Chart.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000"&gt;Aw Snap!&lt;/canvas&gt;
  
  &lt;script&gt;
  context = document.getElementById('myCanvas').getContext('2d');
  
  var data = {
      labels : ["January","February","March","April","May","June","July"],
      datasets : [
          {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              pointColor : "rgba(220,220,220,1)",
              pointStrokeColor : "#fff",
              data : [65,59,90,81,56,55,40]
          },
          {
              fillColor : "rgba(151,187,205,0.5)",
              strokeColor : "rgba(151,187,205,1)",
              pointColor : "rgba(151,187,205,1)",
              pointStrokeColor : "#fff",
              data : [28,48,40,19,96,27,100]
          }
      ]
  }
  Line.defaults = {
  
      //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 : "&lt;%=value%&gt;",
  
      //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
  
  }
  
  new Chart(context).Line(data,options);
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>What am I doing wrong that is causing my chart to not show?</p>