Chart js to create bar chart with time scale on Y axis in Hours and Minutes - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart js to create bar chart with time scale on Y axis in Hours and Minutes

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ChartJS v1  - Formatted times on y-axis</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w w w .j  a va 2  s  .c  om*/
$(document).ready(function() {
  var data = {
    labels: ['modo 1','modo 2', 'modo 13'],
    datasets: [{
      label: "# Durata reale",
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'red',
      data: [3100, 615, 705]
    }, {
      label: "# Ore in",
      backgroundColor: '#DEF797',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'yellow',
      data: [0, 0, 465]
    }]
  };
  var options = {
    scaleOverride: true,
    scaleSteps: 8,
    scaleStepWidth: 1800,
    scaleStartValue: 0,
    responsive: true,
    maintainAspectRatio: false,
    scaleLabel: function(valuePayload) {
       console.log(new Date(valuePayload.value  * 1000).toISOString());
      return new Date(valuePayload.value  * 1000).toISOString().substr(12, 7);
    },
    multiTooltipTemplate: function(valuePayload) {
      return valuePayload.datasetLabel + " " + new Date(valuePayload.value * 1000).toISOString().substr(12, 7)
    },
    title: {
        display: false,
        text: 'stat 1'
    }
  };
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx).Line(data, options);
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" height="300" width="300"></canvas>  
   </body>
</html>

Related Tutorials