Chartjs bar chart appears empty when page loads

I am using the ChartJS library to display a bar chart on my HTML page. The issue I am facing is when the page loads, it displays an empty bar chart without the data I have passed into it and without rendering the bars. After one click to the legend, the chart resizes and my labels appear on the x-axis, on the second click the bars are rendered and the y-axis populates to my passed in data. I am not sure why the chart is behaving this way.

I tested the chart with the code provided in the chart.js documentation and it appears instantly. I think the issue has to do with how I am calling my express backend to retrieve data from my endpoint.

Not sure how to resolve this issue. Any help is appreciated.

index.html:

<canvas
      id="patents-per-category-bar-chart"
      width="400"
      height="400"
    ></canvas>
<script type="text/javascript">
      var categoryLabels = [];
      var categoryValues = [];
      var centerLabels = [];
      var centerValues = [];
      $.getJSON("http://localhost:5000/api").done((data) => {

        for (let item in data.patentsPerCategory) {
          if (!data.patentsPerCategory.hasOwnProperty(item)) {
            continue;
          }
          categoryLabels.push(item);
          categoryValues.push(data.patentsPerCategory[item]);
        }

        for (let item in data.patentsPerCenter) {
          if (!data.patentsPerCenter.hasOwnProperty(item)) {
            continue;
          }
          centerLabels.push(item);
          centerValues.push(data.patentsPerCenter[item]);
        }
      });

      var ctx = document
        .getElementById("patents-per-category-bar-chart")
        .getContext("2d");
      var barChartConfig = {
        type: "bar",
        data: {
          labels: categoryLabels,
          datasets: [
            {
              backgroundColor: "blue",
              label: "# Patents Per Category",
              data: categoryValues,
            },
          ],
        },
        options: {
           legend: {
             onClick: null,
           },
          responsive: true,
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
          },
        },
      };
      var categoryBarChart = new Chart(ctx, barChartConfig);
    </script>

mock data returned from the api:

{
  "category": {
    "health medicine and biotechnology": 37,
    "instrumentation": 38,
    "storage": 30,
    "systems": 71,
    "aeronautics": 1,
    "electronics": 47,
    "optics": 60,
    "materials": 119,
    "undefined": 3,
    "communications": 32,
    "sensors": 102,
    "robotics": 37,
    "software": 49,
    "propulsion": 9,
    "manufacturing": 40,
    "environment": 24,
    "aerospace": 79
  }
}

After returning this data from the api, I iterate over it and push the keys and values into separate arrays which are categoryLabels, categoryValues. Then pass these arrays directly into the labels and data for the chart

Created a jsFiddle:
https://jsfiddle.net/tkdamxr5/2/

It works fine in the jsFiddle enviornment so the issue must be in the way I am calling my data using jQuery. Can anyone clarify how I need to call my express backend to get the data and pass it into the chart so it works correctly?

107 thoughts on “Chartjs bar chart appears empty when page loads”

  1. A person necessarily lend a hand to make critically articles I might
    state. That is the first time I frequented your
    web page and thus far? I surprised with the research
    you made to create this particular submit extraordinary. Fantastic job!

    Reply
  2. Thank you for another informative website. The place else
    may I am getting that kind of info written in such an ideal approach?
    I have a project that I’m just now working on, and I’ve been at the glance out for such info.

    Reply
  3. Hi would you mind stating which blog platform you’re working with?
    I’m going to start my own blog soon but I’m having a difficult time
    making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

    Reply

Leave a Comment