Chart.js to add row to bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js to add row to bar 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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w  w  w .  j  ava 2  s .c  o  m*/
var ctx = $("#hChart");
var labels = ["D1", "D2", "D3", "D4", "D5", "D6", "D7"];
var graphValue = [6, 5, 8, 1, 6, 5, 4];
var data = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            borderWidth: 1,
            data: graphValue
        }
    ]
}
var myChart = new Chart(ctx, {
   type: 'horizontalBar',
  data: data,
   options: {
     scales: {
       yAxes: [{
         barPercentage: 0.95,
        categoryPercentage: 1.0
          }]
        },
      scaleShowVerticalLines: false
       }
});
$("#updateData").on("click", function(){
      labels.push("New" );
      graphValue.push( 5);
      myChart.data.labels = labels;
      myChart.data.datasets.data = graphValue;
      myChart.update();
});
    }

      </script> 
   </head> 
   <body> 
      <div> 
         <button id="updateData">Add Row</button> 
      </div> 
      <div> 
         <canvas id="hChart"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials