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 hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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();
}