[Chartjs]-Chart.js Date and Time Bar Chart Not Rendering – Line Works Though

by

2👍

✅

The issue is, bar chart doesn’t support the type of data format, that you are providing.

You should rather use the following type of data format …

renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players

here, third argument is for x-axis labels and the forth one is for data

and, here’s the working version of your code, with this applied …

$(document).ready(function() {
   renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
   renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});

function renderChartJS(chartType, elemId, labels, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax) {

   var ticksObj = {
      suggestedMin: 0,
      beginAtZero: true,
      stepValue: 50,
   }

   if (yMax != 0) {
      ticksObj.max = yMax;
   }

   if (data.length) {
      var ctx = document.getElementById(elemId).getContext('2d');
      var myChart = new Chart(ctx, {
         type: chartType,
         data: {
            labels: labels,
            datasets: [{
               label: yAxisLabel,
               data: data,
               borderColor: "rgba(" + rgbaColorStr + ",1)",
               backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
            }],
         },
         options: {
            responsive: false,
            maintainAspectRatio: true,
            scaleBeginAtZero: true,
            title: {
               display: true,
               text: title
            },
            scales: {
               xAxes: [{
                  type: "time",
                  display: true,
                  scaleLabel: {
                     display: true,
                     labelString: xAxisLabel
                  },
                  ticks: {
                     minRotation: 90,
                     maxRotation: 90,
                     stepValue: 10,
                     autoSkip: true,
                     maxTicksLimit: 50
                  },
                  time: {
                     unit: 'minute',
                     unitStepSize: 10,
                     max: data[data.length - 1].x
                  }
               }],
               yAxes: [{
                  display: true,
                  scaleLabel: {
                     display: true,
                     labelString: yAxisLabel
                  },
                  ticks: ticksObj
               }]
            }

         }
      });
   }
}
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>

Leave a comment