4đź‘Ť
This is an accual chart made in Chart.JS, note when you inspect that element it is on a <canvas id="hero-bar">
. Then you can find how that chart works by looking in the JavaScript for the element with an id of hero-bar
. The code for that bar chart happens to be starting on lines 108-161 in the source ( http://www.chartjs.org/) of the page.
In this case the values are simply randomized on a timer, below is the source code for that chart on thier page:
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').getContext('2d')).Bar({
labels : labels,
datasets : [{
fillColor : '#2B303B',
data : data
}]
},{
showScale : false,
barShowStroke : false,
barValueSpacing: 1,
showTooltips : false,
onAnimationComplete : function(){
// Get scope of the hero chart during updates
var heroChart = this,
timeout;
// Stop this running every time the update is fired
this.options.onAnimationComplete = randomUpdate;
this.options.animationEasing = '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.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
};
heroChart.update();
},Math.random() * updateDelayMax);
};
}
});
1đź‘Ť
Ad 1. This “animation” it’s actually painted by javascript (dynamically), i suppose they are using their own plugin to create such a graph.
Ad 2. There is a lot of methods to achieve this kind of effect
- Using js and draw a canvas with premade animations, the moves and
times of this animation can be calculated randomly by your own sets
of options - You probably could recreate this diagram using only CSS and Key-frames, you can read about them here: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
- Also we could make something more abstracted and use a video as a background. so you could show any kind of animation, movie etc
- You Can also use a svg elements to actually paint this graph manually (by setting the vector path, which can be earlier prepared in adobe illustrator) and then animate it – more information about animation of svg https://css-tricks.com/guide-svg-animations-smil/
So as you can see there is a bunch of methods which have different options, schemes, performance and so. But the effect will stay the same for all of them