title: ReferenceError: Chart is not defined - chartjs
body: <p>Is there a bug with Chart.js? Every time I add any of the graphs at Chart.js to my website I get an error, but when I used the graph as stand-alone program it runs smoothly without errors. I am using HTML5.</p>
  
  <pre><code>   &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt;Rice Consumption&lt;/title&gt;
        &lt;script src='Chart.min.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
        &lt;canvas id="rice" width="600" height="400"&gt;&lt;/canvas&gt;
  
        &lt;script&gt;
          var riceData = {
          labels : ["January","February","March","April","May","June"],
          datasets :
           [
              {
                fillColor : "rgba(172,194,132,0.4)",
                strokeColor : "#ACC26D",
                pointColor : "#fff",
                pointStrokeColor : "#9DB86D",
                data : [203000,15600,99000,25100,30500,24700]
              }
           ]
          }
  
            var rice = document.getElementById('rice').getContext('2d');
                 new Chart(rice).Line(riceData);
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>SOLVED</strong>: I just decoupled the script from the canvas element (made another file for the script to execute its function).</p>
  
  <p>Updated HTML:</p>
  
  <pre><code>      &lt;html&gt;
        &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt;Rice Consumption&lt;/title&gt;
        &lt;script src='Chart.min.js'&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;canvas id="rice" width="600" height="400"&gt;&lt;/canvas&gt;
        &lt;script src='Chart.min.js'&gt;&lt;/script&gt;
        &lt;script src='rice.js'&gt;&lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>
  
  <p>New JavaScript file:</p>
  
  <pre><code>var riceData = {
      labels : ["January","February","March","April","May","June"],
      datasets : [
          {
              fillColor : "rgba(172,194,132,0.4)",
              strokeColor : "#ACC26D",
              pointColor : "#fff",
              pointStrokeColor : "#9DB86D",
              data : [203000,15600,99000,25100,30500,24700]
          }
      ]
  }
  
  var rice = document.getElementById('rice').getContext('2d');
  new Chart(rice).Line(riceData);
  </code></pre>