Display Chart in Express.js App using CanvasJS

Published at

12/2/2024

Prerequisites

Before you start, make sure you have the following installed:

Node.js (LTS version recommended)
npm (comes with Node.js)
Basic knowledge of JavaScript and Express.js

Step 1: Set Up Your Express.js Application

Create a new directory for your project and navigate to it:

mkdir express-canvasjs-chart
cd express-canvasjs-chart

Initialize a new Node.js project:

npm init -y

Install Express:

npm install express

Create a file named server.js and set up a basic Express server:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Step 2: Add CanvasJS to Your Project

CanvasJS is a client-side library, so you need to include it in your front-end code.

Download the CanvasJS library from CanvasJS's official website.
Create a public folder in your project directory.
Place the downloaded CanvasJS script (e.g., canvasjs.min.js) inside the public folder.

Step 3: Create an HTML File to Display the Chart

Inside the public folder, create a file named index.html.
Add the following content to index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Chart in Express App using CanvasJS</title>
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",
                title: {
                    text: "Display Chart in Express.js App using CanvasJS"
                },
                axisY: {
                    title: "Revenue (in USD)"
                },
                data: [{
                    type: "column",
                    dataPoints: [
                        { label: "January", y: 3000 },
                        { label: "February", y: 5000 },
                        { label: "March", y: 7000 },
                        { label: "April", y: 4000 },
                        { label: "May", y: 6000 }
                    ]
                }]
            });
            chart.render();
        };
    </script>
</body>
</html>

Step 4: Run Your Application

Start the server:

node server.js

Open your browser and navigate to http://localhost:3000.
You should see a column chart displaying the sales data.

Step 5: Customize Your Chart

To customize your chart, you can modify the dataPoints array with dynamic data from an API or database, such as MySQL or MongoDB. For example, you could replace the static sales data with real-time sales fetched from a backend service. You can also experiment with different chart types like line, bar, or pie to suit your visualization needs. For detailed customization options, refer to the CanvasJS documentation.

Conclusion

By integrating CanvasJS with Express.js, you unlock the ability to present data in a visually compelling and interactive manner. Whether you're building dashboards or enhancing user interfaces, this combination provides a seamless way to make data insights more engaging and accessible. Additionally, you can display charts using data sourced from databases like MySQL or MongoDB, which we will explore in future articles.

dev-resources.site