title: Create dynamic chart with chart.js
body: <p>I am using Chart.js jquery plugin to create bar chart . I can create static chart but i want to create a dynamic chart. I want to draw the chart from the data which read from a html table. How to set dynamic dataset to a chart.js bar chart.</p>
  
  <p>This is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Bar Chart&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
      &lt;script src="js/Chart.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div style="width:50%;"&gt;
          &lt;canvas id="canvas_bar"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;div class="dataset"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Year&lt;/th&gt;
                  &lt;th&gt;Income&lt;/th&gt;
                  &lt;th&gt;Expenditure&lt;/th&gt;
                  &lt;th&gt;Profit/Loss&lt;th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;2012&lt;/td&gt;
                  &lt;td&gt;10000&lt;/td&gt;
                  &lt;td&gt;5000&lt;/td&gt;
                  &lt;td&gt;5000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;2013&lt;/td&gt;
                  &lt;td&gt;11500&lt;/td&gt;
                  &lt;td&gt;7500&lt;/td&gt;
                  &lt;td&gt;4000&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;2014&lt;/td&gt;
                  &lt;td&gt;9800&lt;/td&gt;
                  &lt;td&gt;4700&lt;/td&gt;
                  &lt;td&gt;5100&lt;/td&gt;
              &lt;/tr&gt;
          &lt;table&gt;
      &lt;div&gt;
  
  
  
  &lt;script&gt;
          var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  
          var barChartData = {
              labels : ["2012","2013","2014"],
              datasets : [
                  {
                      fillColor : "rgba(95,137,250,0.5)",
                      strokeColor : "rgba(95,137,250,0.9)",
                      highlightFill: "rgba(95,137,250,0.75)",
                      highlightStroke: "rgba(95,137,250,1)",
                      data : [10000,11500,9800]
                  },
                  {
                      fillColor : "rgba(245,75,75,0.5)",
                      strokeColor : "rgba(245,75,75,0.8)",
                      highlightFill : "rgba(245,75,75,0.75)",
                      highlightStroke : "rgba(245,75,75,1)",
                      data : [5000,7500,4700]
                  },
                  {
                      fillColor : "rgba(98,223,114,0.5)",
                      strokeColor : "rgba(98,223,114,0.8)",
                      highlightFill : "rgba(98,223,114,0.75)",
                      highlightStroke : "rgba(98,223,114,1)",
                      data : [5000,4000,5100]
                  }
              ]
  
          };  
          window.onload = function(){
              var ctx = document.getElementById("canvas_bar").getContext("2d");
              window.myBar = new Chart(ctx).Bar(barChartData, {
                  responsive : true
              });
          }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>