Chartjs - data format for bar chart with multi-level x-axes - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chartjs - data format for bar chart with multi-level x-axes

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" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*ww  w  . j a  v  a 2 s. c  o  m*/
var myData = [
  ["ABC212","Toyota Corolla","Toyota",1.95],
  ["ABC212","Toyota Yaris","Toyota",1.94],
  ["ABC212","Totyota Etios","Toyota",1.93],
  ["ABC212","Honda City","Honda",1.93],
  ["ABC212A","Honda Brio","Honda",1.91],
  ["DEF311","Toyota Camry","Toyota",1.90],
  ["DEF310","Toyota Prius","Toyota",1.82],
  ["DEF310","Ford Explorer","Ford",1.85],
  ["DEF310","Ford Endeavour","Ford",1.83],
  ["DEF305","Ford Fugo","Ford",1.79]
];
/*Calculates group labels to a scaled array so that they can align better*/
function calculateGroupLabels(data){
  const scaleFactor=100;
  var labels = _(data)
  .groupBy((elem)=>elem[0])
  .map((entriesOnSameGroup, key)=>{
      var newSize = entriesOnSameGroup.length*scaleFactor;
      var newArray = new Array(newSize);
      newArray[0]="";
      newArray[newArray.length-1]="";
      newArray[parseInt((newArray.length-1)/2)]=key;
      return newArray;
  }).flatten().value()
  return labels;
}
var labels = calculateGroupLabels(myData);
var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      xAxisID:'modelAxis',
      data: myData.map((entry)=>entry[3])
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'modelAxis',
          type:"category",
          ticks:{
            //maxRotation:0,
            autoSkip: false,
            callback:function(label, x2, x3, x4){
              console.log("modelAxis", label, x2, x3, x4)
              return label;
            }
                   },
         labels:myData.map((entry=>entry[1]))
        },
        {
          id:'groupAxis',
          type:"category",
          gridLines: {
            drawOnChartArea: false,
          },
          ticks:{
            padding:0,
            maxRotation:0,
            autoSkip: false,
            callback:function(label){
               return label;
            }
          },
          labels:labels
        }],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});
    }

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

Related Tutorials