Chart.js - How to show loading animation before plotting chart

user_5436458 0
Viewed 23088

I am using chart.js plugin to plot line chart.
I want to display loading before plotting chart.

I have tried following but nothing is happening.
Here it is showing jQuery error:

Uncaught ReferenceError: progress is not defined

But in my application it doesnt showing error.

How to show animation or loading before plotting graph?
I am using semantic-ui as css framework.

new Chart(document.getElementById("line-chart"),{
  type: 'line',
  data:{
    labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
    datasets: [{
        data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      },{
        data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      },{
        data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      },{
        data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      },{
        data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options:{
    title:{
      display: true,
      text: 'World population per region (in millions)'
    },
    animation:{
      onProgress: function (animation){
        progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
      }
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="line-chart" ></canvas>

chart.js jquery
2 Answers

The code you're looking at there - the chart.js "progress bar" example, is for a progress bar during the animation as the chart is painted.

You need to have a progress bar whilst the data is loading, which is a different thing. Hence you are looking at the wrong code.

The animations in chart.js are animating the drawing of the charts, not the acquisition of the data, which is a user problem for which you'll find lots of example code everywhere.

user_3985130
Related