Display Chart in Express.js App using CanvasJS

#express #node #chart #javascript

Express.js is a powerful tool for creating server-side applications, and CanvasJS makes it easy to visualize data with interactive charts. This tutorial will show you how to integrate the two for a seamless charting experience in your Express.js application.

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

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

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

2. Initialize a new Node.js project:

npm init -y

3. Install Express:

npm install express

4. 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.
1. Download the CanvasJS library from CanvasJS's official website.
2. Create a public folder in your project directory.
3. Place the downloaded CanvasJS script (e.g., canvasjs.min.js) inside the public folder.

Step 3: Create an HTML File to Display the Chart

1. Inside the public folder, create a file named index.html.
2. 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

1. Start the server:

node server.js

2. Open your browser and navigate to http://localhost:3000.
3. 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.