[Chartjs]-How can i create a background of moving graphs like chartsjs?

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

Leave a comment