CODEWITHSUNDEEP
javascriptchartschart.jsrefresh
Mr. Baldan
Mr. Baldan

Reputation: 257

Refreshing the image of a chart using chart.js

I'm doing an app that displays daily personal work data. I store the data in an array called "dailyTimePerProjectPerWeek", for now I define the data for 3 weeks. I have placed two buttons in the html, "Previous Week" and "Next Week", to navigate between the weeks. When the page is loaded for the first time it shows the most recent week corresponding to the highest index of the array mentioned above. The problem is that it does something strange to me to visualize the data, it's like that I created several charts. How can I refresh the image of the chart properly? There goes my html code:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Charts4DailyProgress</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>


<body>
<h1>Weekly Time per Project</h1>
<div id="canvas-container">
<canvas id="ctx" width="1000"></canvas>
<button type="button" onclick="decrementWeek()">Previous Week</button>
<button type="button" onclick="incrementWeek()">Next Week</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script  src="js/index.js"></script>

</body>


</html>

There goes my javascript code:

var dailyTimePerProjectPerWeek =[];
dailyTimePerProjectPerWeek[0] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [300, 480, 360,180, 240, 300,480],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [60, 0, 240, 180, 120, 0, 60],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [60, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [120, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [60, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,240],
         backgroundColor: '#6cc4ee'
      }]
   }

dailyTimePerProjectPerWeek[1] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [0, 480, 360,180, 240, 300,480],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [0, 0, 240, 180, 120, 0, 60],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [0, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [0, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [0, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,240],
         backgroundColor: '#6cc4ee'
      }]
   }
dailyTimePerProjectPerWeek[2] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [300, 480, 360,180, 240, 300,0],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [60, 0, 240, 180, 120, 0, 0],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [60, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [120, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [60, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,0],
         backgroundColor: '#6cc4ee'
      }]
   }


var currentWeek = dailyTimePerProjectPerWeek.length - 1;
var weekValue = currentWeek; //At first time weekValue points to the current week

function drawData(){
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
}

function incrementWeek(){
 if(weekValue === dailyTimePerProjectPerWeek.length - 1){
   console.log("This is the current week");
 } else {
  weekValue += 1;
  drawData();
 }
}

function decrementWeek(){
 if(weekValue === 0){
   console.log("This is the oldest week of the time series");
 } else {
  weekValue -= 1;
  drawData();
 }
}



/*
function selectWeek(){

}
*/

/*
function fixWeek(){




}*/
//Main Program
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});

The truth is that I use the following code to try to refresh the image:

function drawData(){
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
}

Upvotes: 0

Views: 263

Answers (1)

ViqMontana
ViqMontana

Reputation: 5698

Change your drawData() function to:

function drawData() {
  chart.data = dailyTimePerProjectPerWeek[weekValue];
  chart.update();
}

Upvotes: 1

Related Questions