How to remove old data in a bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

How to remove old data in a bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
   </head> 
   <body> 
      <div class="col_half" id="subSectionalChart" style="opacity: 1;"> 
         <canvas id="subSectionalChartCanvas" width="547" height="400"></canvas> 
      </div> 
      <script>
        var data = {//from w  w w. j  a  va2s  . c  o  m
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };
        var options = {
                  scaleBeginAtZero : true,
                  scaleShowGridLines : true,
                  scaleOverlay: false,
                  scaleShowGridLines: true,
                  scaleGridLineColor : "rgba(0,0,0,.05)",
                  scaleGridLineWidth : 1,
                  scaleShowHorizontalLines: true,
                  scaleShowVerticalLines: true,
                  barShowStroke : true,
                  barStrokeWidth : 2,
                  barValueSpacing : 5,
                  barDatasetSpacing : 1,
        };
        setTimeout(test, 5000);
        var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d");
        var x = new Chart(ctx).Bar(data,options);
        function test() {
            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data: [1, 2, 3, 4, 5, 6, 7]
                    }
                ]
            };
            x.clear();
            x = new Chart(ctx).Bar(data,options);
        }
    
      </script>  
   </body>
</html>

Related Tutorials