Created
July 9, 2015 14:11
-
-
Save DamianCasale/71ad77c50e95d9d52ba1 to your computer and use it in GitHub Desktop.
Live updating of doughnut graph using Chart.js (60 second count down timer)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Chart.js Live Update Example</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> | |
| <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| $(document).ready(function() { | |
| var max_value = 60 | |
| chartOptions = { | |
| segmentShowStroke: false, | |
| percentageInnerCutout: 75, | |
| animation: false | |
| }; | |
| chartData = [{ | |
| value: 0, | |
| color: '#4FD134' | |
| },{ | |
| value: max_value, | |
| color: '#DDDDDD' | |
| }]; | |
| var ctx = $('#chart').get(0).getContext("2d"); | |
| var theChart = new Chart(ctx).Doughnut(chartData,chartOptions); | |
| theInterval = setInterval(function(){ | |
| if (theChart.segments[0].value == max_value) { | |
| clearInterval(theInterval); | |
| } else { | |
| theChart.segments[0].value = theChart.segments[0].value+1 | |
| theChart.segments[1].value = theChart.segments[1].value-1 | |
| theChart.update() | |
| } | |
| }, 1000); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="chart" width="300" height="300"></canvas> | |
| </body> | |
| </html> |
Just in case
Chart.js v2.9.4
var max_value = 60;
chartOptions = {
//cutoutPercentage: 40,
responsive: false,
};
chartData = {
datasets: [
{
data: [max_value, 0],
backgroundColor: ['#4FD134', '#DDDDDD'],
},
],
};
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: chartData,
options: chartOptions,
});
window.setInterval(function () {
if (myChart.data.datasets[0].data[1] == max_value) {
clearInterval();
} else {
addData();
}
}, 1000);
function addData() {
myChart.data.datasets[0].data[0] = myChart.data.datasets[0].data[0] - 1;
myChart.data.datasets[0].data[1] = myChart.data.datasets[0].data[1] + 1;
myChart.update();
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this gist. This works like a charm.
How to reflect the remaining time left at the center of this chart?