Test Fiddle 2

Test ChartJS

by tbeehoon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <canvas id="myChart"> </canvas>
    </div>
  </div>
  <div class="buttons">
  <button id="btn2014">
   2014
   </button>
   <button id="btn2015">
   2015
   </button>
   <button id="btn2016">
   2016
   </button>
   
  </div>
</div>
<a href="http://www.mas.gov.sg/"> Data Source:'Monetary Authority of Singapore' </a>
<p>
  Note: Figures refer to average rates compiled from that quoted by 10 leading Singapore banks and finance companies.
</p>

CSS

.container {
  width: 520px;
  height: 280px;
  border: 1px solid #ddd;
  margin: 10px 10px 10px 20px;
  padding: 10px 20px 10px 50px;
  border-radius: 10px;
}


button {
  font-size: 12px;
  margin: 0px 0px 0px 20px;
  border-radius: 5px;
}

p,a  {
  font-size: 12px;
  margin: 0px 0px 0px 20px;
}

JavaScript

var ctx = $("#myChart");

var data2014 = [2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93, 2.93];
var data2015 = [2.93, 3.01, 3.01, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.1, 3.22];
var data2016 = [3.22, 3.39, 3.39, 3.39, 3.39, 3.41, 3.41, 3.41, 3.41, 3.41, 3.41, 3.41];

var newChart = new Chart(ctx, {
  type: "bar",

  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

    datasets: [ {
      label: "2016",
      data: data2016,
      backgroundColor: "indigo"
    }]
  },

  options: {
    responsive: true,
    maintainAspectRatio: true,
    scales: {
    	
      yAxes: [{
        
        gridLines : {
                display : true
        },
        scaleLabel: {
          display: true,
          labelString: 'Percent per Annum',
          fontSize: 10
        },
        ticks: {
          beginAtZero: false,
          stepSize: 0.1,
          min: 2.80,
          max: 3.50
        }
      }],
      xAxes: [{
        gridLines : {
                display : true
        },
        scaleLabel: {
          display: true,
          labelString: '',
          fontSize: 10
        }
      }]
    },

    title: {
      display: true,
      text: ' SG Housing Loan Interest Rates',
      fontSize: 15
    }
  }
});

$("#btn2015").on("click", function(){
   newChart.data.datasets[0].label="2015";
   newChart.data.datasets[0].data=data2015;
   newChart.data.datasets[0].backgroundColor= "indigo",
   newChart.update();
});

$("#btn2014").on("click", function(){
   newChart.data.datasets[0].label="2014";
   newChart.data.datasets[0].data=data2014;
   newChart.data.datasets[0].backgroundColor= "blue",
   newChart.update();
});

$("#btn2016").on("click", function(){
   newChart.data.datasets[0].label="2016";
   newChart.data.datasets[0].data=data2016;
   newChart.data.datasets[0].backgroundColor= "purple",
   newChart.update();
});