Multiple group on AxisX using bar chart via chartjs - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Multiple group on AxisX using bar chart via chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>multi x-axis</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  w w  .  ja  v a 2s.c  o m*/
var ctx = document.getElementById('c');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Active;January", "Inactive;January", "Active;February", "Inactive;February", "Active;March", "Inactive;March"],
      datasets:  [{
      label: "Gestor A",
      backgroundColor: "blue",
      data: [3, 7, 4, 2, 3, 1]
    }, {
      label: "Gestor B",
      backgroundColor: "red",
      data: [4, 3, 5, 3, 1, 2]
    }, {
      label: "Gestor C",
      backgroundColor: "green",
      data: [7, 2, 6, 8, 2, 1]
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'xAxis1',
          type:"category",
          ticks:{
            callback:function(label){
              var state = label.split(";")[0];
              var user = label.split(";")[1];
              return state;
            }
          }
        },
        {
          id:'xAxis2',
          type:"category",
          gridLines: {
            drawOnChartArea: false,
          },
          ticks:{
            callback:function(label){
              var state = label.split(";")[0];
              var user = label.split(";")[1];
              if(state === "Inactive"){
                return user;
              }else{
                return "";
              }
            }
          }
        }],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});
    }

      </script> 
   </head> 
   <body>  
      <canvas id="c" width="400" height="300"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script>   
   </body>
</html>

Related Tutorials