Get values and put in chart.js - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Get values and put in chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head></head>
   <body translate="no">   
      <canvas id="canvas_bar"></canvas>   
      <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
      <script>
      var barChartData = {/*  w  ww. j  a v a2 s  . c o  m*/
    labels: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"],
    datasets: [
            {
                fillColor: "#03586A", //rgba(151,187,205,0.5)
                strokeColor: "#03586A", //rgba(151,187,205,0.8)
                highlightFill: "#066477", //rgba(151,187,205,0.75)
                highlightStroke: "#066477", //rgba(151,187,205,1)
                data: [10,2,3,11,23,4,5,6,7,8,9,20]
    }]
};
    $(document).ready(function () {
        new Chart($("#canvas_bar").get(0).getContext("2d")).Bar(barChartData, {
            tooltipFillColor: "rgba(51, 51, 51, 0.55)",
            responsive: true,
            barDatasetSpacing: 6,
            barValueSpacing: 5
        });
    });
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials