Out Chart.js animations when updating data - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Out Chart.js animations when updating data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  w  w w.  j av  a  2  s.  c o m
Chart.defaults.global.responsive = false;
var chartData1 = {
  labels: ["L1", "l2", "l3", "l4"],
  datasets: [{
    label: "LEGEND",
    data: [13, 23, 9, 4],
    backgroundColor: "#FF88CC",
    borderColor: "#000000",
    borderWidth: 1,
  }]
}
var chartData2 = {
  labels: ["L11", "L12"],
  datasets: [{
    label: '{{ legend }}',
    data: [7, 1],
    backgroundColor: "#FEFE65",
    borderColor: "#00FFFF",
    borderWidth: 2,
  }]
}
var pieChartOptions = {
  rotation: -Math.PI,
  cutoutPercentage: 30,
  circumference: Math.PI,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: true,
    animateScale: false
  }
};
var ctx = document.getElementById("chart").getContext("2d");
var pieChart;

showChart1Data();
function manageCharts() {
  var button = document.getElementById("chartDataButton");

  if (button.textContent === 'Chart 2') {
    button.textContent = "Chart 1";
    showChart2Data();
  } else if (button.textContent === 'Chart 1') {
    button.textContent = "Chart 2";
    showChart1Data();
  }
}
function showChart2Data() {
  pieChart = new Chart(ctx, {
    type: 'pie',
    data: chartData2,
    options: pieChartOptions
  });
}
function showChart1Data() {
  pieChart = new Chart(ctx, {
    type: 'pie',
    data: chartData1,
    options: pieChartOptions
  });
}
function destroyChart() {
  if (pieChart)
    pieChart.destroy();
}
document.getElementById('chartDataButton').addEventListener('click', manageCharts);
    }

      </script> 
   </head> 
   <body>  
      <canvas id="chart" width="600" height="400"></canvas> 
      <button id="chartDataButton">Chart 2</button>   
   </body>
</html>

Related Tutorials