Display Chart.js chart in Node.js

Question

I am working on a software project with a team, and I would like to add a page that displays a bar chart using Chart.js. The project is using Node.js, and we are using Express.js to render the views on our server.

The issue is that when I displayed the page with the bar chart on its own, it worked just fine. When I tried to run the server (i.e. node app.js), however, the page wouldn't display the chart, no matter where I placed my JavaScript code for drawing the chart.

Here is my EJS file with the chart:

<!DOCTYPE html>
<head>

    <title>Connect Concordia</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
      <!-- load bootsrap css -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <script type="text/javascript" src="../node_modules/chart.js/dist/Chart.js"></script>
</head>

<body>


<canvas id="myCanvas" width="400" height="400">Your browser does not support the canvas feature.</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Strongly Agree', 'Agree', 'Neither Agree nor Disagree', 'Disagree', 'Strongly Disagree'],
            datasets: [{
                label: 'Number of Responses',
                data: [5, 10, 6, 3, 2],
                backgroundColor: "rgb(100, 100, 100)"
            }]
        },
        options: {
            responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 50,
                        stepSize: 10
                    }
                }]
            }
        }
    });
</script>

</body>
</html>

And this is the code to render the page on the app, found in a larger file called routes.js:

res.render('sp-results.ejs')

Note: I myself am new to Node.js, so if there is anything else I need to know please inform me. Any help on this issue would be appreciated.

UPDATE:

Upon inspecting the page using Chrome, I found this error message: Failed to load resource: the server responded with a status of 404 (Not Found)

From that, I found out that the reason why the chart isn't displaying is because the server can't reference the library. Since Chart.js isn't a Node.js library, how can I 'require' the Chart.js library?

Are there any errors shown on the console when you go to that page? — jordanwillis
– jordanwillis, Commented Mar 20, 2017 at 20:22
No, it just displays a blank canvas. The HTML works for sure as I got it to display a <p> tagged line as a test. — gameCoder95
– gameCoder95, Commented Mar 20, 2017 at 20:28
Did you try putting your chart.js code inside a window.onload to see if its an issue where the code is running before the DOM is ready? — jordanwillis
– jordanwillis, Commented Mar 20, 2017 at 20:42
Just tried it right now, but I'm not sure if I did it correctly. Is it like this? <script> window.onload = function(){ <chart.js code here> }; </script> — gameCoder95
– gameCoder95, Commented Mar 20, 2017 at 21:06

Community · Accepted Answer · 2017-05-23 11:54:03Z

5

One thing you could try is not initializing your chart until the document is for sure ready. You can do this using window.onload.

window.onload = function() {
  // put chart.js code here
}

Also, I notice that you are trying to link to a chart.js build located in your node_modules folder. I'm not exactly sure how to do this in express in an ejs file, but take a look at this answered question for an example on how to handle this.

You can always use the script hosted on a cdnjs to quickly validate your page is working. Here is an example.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 20, 2017 at 21:43

jordanwillis

10.7k1 gold badge40 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gameCoder95 Over a year ago

Dude, you're actually a life saver! Thank you so much! :) Now I may begin to start working on my actual code XD. Such is the life of a programmer :P

jordanwillis Over a year ago

No problem! I know how it goes ;)

Collectives™ on Stack Overflow

Display Chart.js chart in Node.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related