​

//bar

var ctxB = document.getElementById("barChart").getContext('2d');

var myBarChart = new Chart(ctxB, {

type: 'horizontalBar',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '# of Votes',

data: [0, 0, 0, 0, 0, 0],

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

],

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

],

borderWidth: 1

}]

},

options: {

scales: {

xAxes: [{

ticks: {

beginAtZero: true

}

}]

}

}

});

​

// ----- intersection observer will run animation once it enters the viewport ---------

​

const options = {

  rootMargin: '0px',

  threshold: 0.5

}

​

const intersectionCallback = (entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      myBarChart.data.datasets[0].data = myBarChart.data.datasets[0].data.map(() => {

        return Math.floor(Math.random() * 10 + 1)

      });

​

      myBarChart.update();

      observer.disconnect();

    }

  });

}

​

const observer = new IntersectionObserver(intersectionCallback, options);

​

const target = document.getElementById('barChart');

observer.observe(target);

​

//  ------------ animating chart once on window load -------------

// $(document).ready(()=>{

//   setTimeout(()=>{

//     myBarChart.data.datasets[0].data = myBarChart.data.datasets[0].data.map(() => {

//     return Math.floor(Math.random() * 10 + 1)

//   });

//     myBarChart.update();

//   }, 500)

// })

​

​

// ------------ animating chart on scroll --------------

​

// let debounce = false;

​

// $(window).on('scroll', function(){

//   if (debounce) return;

//   debounce = true;

​

//   myBarChart.data.datasets[0].data = myBarChart.data.datasets[0].data.map(() => {

//     return Math.floor(Math.random() * 10)

//   });

//   const colorNumber = Math.floor(Math.random() * 255);

//   myBarChart.data.datasets[0].backgroundColor = [

//     `rgba(${colorNumber}, 99, ${colorNumber}, 0.2)`,

//     `rgba(${colorNumber}, 162, ${colorNumber}, 0.2)`,

//     `rgba(${colorNumber}, 206, ${colorNumber}, 0.2)`,

//     `rgba(${colorNumber}, 192, ${colorNumber}, 0.2)`,

//     `rgba(${colorNumber}, 102, ${colorNumber}, 0.2)`,

//     `rgba(${colorNumber}, 159, ${colorNumber}, 0.2)`

//   ]

//   myBarChart.update();

//   setTimeout(()=>{

//     debounce = false;

//   }, 500)

// })

​