Load data to HTML table and chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

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

Description

Load data to HTML table and chart

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(){//  w w  w .  j  a  v a 2  s . c  o m
var dict = {
  'Ex': 6,
  'C': 6,
  'blue': 2,
  'car': 2,
  'yellow': 2,
  'X': 4,
  'X3': 2
};
var tableHTML =
  '<table>' + 
    '<thead>' + 
      '<tr><td>Word</td><td>Frequency</td></tr>' + // headings
    '</thead>' + 
    '<tbody>'; 

for (var value in dict) {
  tableHTML += '<tr><td>'; 
  tableHTML += value; 
  tableHTML += '</td><td>'; 
  tableHTML += dict[value]; 
  tableHTML += '</td></tr>'; 
}
tableHTML +=
    '</tbody>' + 
  '</table>'; 
$('#dynamictable').append(tableHTML);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(dict),
        datasets: [{
            label: '# Frecuencies Words',
            data: Object.keys(dict).map(function (key) { return dict[key]; }),
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <div id="dynamictable"></div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script> 
      <canvas id="myChart" width="100" height="100" < canvas>  
      </canvas>
   </body>
</html>

Related Tutorials