chartjs creating equivalent background - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

chartjs creating equivalent background

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.7.1/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  ww w .  jav a 2 s .  c  om*/
var data = [],
   barsCount = 50,
   labels = new Array(barsCount),
   updateDelayMax = 500,
   $id = function(id) {
      return document.getElementById(id);
   },
   random = function(max) {
      return Math.round(Math.random() * 100)
   },
   helpers = Chart.helpers;
Chart.defaults.global.responsive = true;
for (var i = barsCount - 1; i >= 0; i--) {
   data.push(Math.round(Math.random() * 100));
};
new Chart($id('hero-bar'), {
   type: 'bar',
   data: {
      labels: labels,
      datasets: [{
         backgroundColor: '#2B303B',
         data: data
      }]
   },
   options: {
      legend: false,
      scales: {
         yAxes: [{
            display: false
         }]
      },
      tooltips: false,
      animation: {
         onComplete: function() {
            // Get scope of the hero chart during updates
            var heroChart = this,
               timeout;
            // Stop this running every time the update is fired
            this.options.animation.onComplete = randomUpdate;
            this.options.animation.eeasing = 'easeOutQuint';
            randomUpdate();
            function randomUpdate() {
               heroChart.stop();
               clearTimeout(timeout);
               // Get a random bar
               timeout = setTimeout(function() {
                  var randomNumberOfBars = Math.floor(Math.random() * barsCount),
                     i;
                  for (i = randomNumberOfBars - 1; i >= 0; i--) {
                     heroChart.data.datasets[0].data[Math.floor(Math.random() * barsCount)] = Math.round(Math.random() * 100);
                  };
                  heroChart.update();
               }, Math.random() * updateDelayMax * 2);
            };
         }
      }
   }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="hero-bar"></canvas>  
   </body>
</html>

Related Tutorials