Chart.js tooltip update - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

Chart.js tooltip update

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from   w  w  w .j  a v a2  s . c  om
test_labels = ["Test meh", "Test beh", "Test yeh"]
score = [4,3.8,5]
var s2 = document.getElementById("slct2");
s2.innerHTML = "";
for (var test in test_labels) {
    if (test_labels.hasOwnProperty(test)) {
        var pair = test_labels[test] + score[test];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = "test_filter";
        checkbox.value = pair;
        checkbox.checked = true;
        s2.appendChild(checkbox);
        var label = document.createElement('label');
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));
        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));
    }
}
var myChart;
function fillCanvas (test_labels, score) {
  var ctx = document.getElementById("myChart").getContext('2d');
  ctx.innerHTML = "";
  if(myChart)
  {
     myChart.destroy();
  }
  myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels : ["test_month"]
      },
  });
  setTimeout(function () {
     for (test in test_labels){
        myChart.data.datasets.push({
          backgroundColor: 'rgb(228,26,28)',
          label: test_labels[test],
          data: [score[test]]
        });
      }
    myChart.update();
  }, 1000);
}
fillCanvas(test_labels, score);
var filter_magic = function(e) {
        test_selected = []
        var table1 = document.getElementById("table1");
        table1.innerHTML = "";
        jQuery('input[type="checkbox"][name="test_filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
              var tr = document.createElement('tr');
              tr.innerHTML = this.value;
              table1.appendChild(tr);
              test_selected.push(this.value);
            }
          })
        fillCanvas(test_selected, score);
        }
jQuery('input[type="checkbox"][name="test_filter"]').on('change', filter_magic);
filter_magic();
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <div id="slct2">
         "beh"
      </div> 
      <table id="table1" border="1"></table> 
      <!-- bar chart canvas element --> 
      <canvas id="myChart" width="200" height="50"></canvas> 
      <script type="text/javascript">

      </script>  
   </body>
</html>

Related Tutorials