Chart.js Date and Time Bar Chart Not Rendering - Line Works Though

Question

I'm using Chart.js to create a datetime bar chart showing the number of players in multiple servers depending on the date and time of the last scan. However, for some reason, the bar chart will not render. If I use a line type chart, it renders just fine. Anyone know why the bar chart will not render? I don't have any console errors in developer tools.

Here's the fiddle:

https://jsfiddle.net/j3rmjzpw/2/

HTML:

<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>

Javascript / jQuery:

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


function renderChartJS(chartType, elemId, 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: {
                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
                    }]
                }

            }
        });
    }
}

The bottom chart should be the bar chart, but it is not rendering properly.

Anyone know what's happening?

Answer 1

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>