Display Chart in Express.js App using CanvasJS-JS Tutorial-php.cn

Display Chart in Express.js App using CanvasJS

Susan Sarandon

Release： 2024-12-03 10:26:09

Original

314 people have browsed it

Display Chart in Express.js App using CanvasJS

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

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

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

Copy after login

Initialize a new Node.js project:

npm init -y

Copy after login

Install Express:

npm install express

Copy after login

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}`);
});

Copy after login

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>



<h3>
  
  
  Step 4: Run Your Application
</h3>

<ol>
<li>Start the server:
</li>
</ol>

<pre class="brush:php;toolbar:false">node server.js

Copy after login

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.

The above is the detailed content of Display Chart in Express.js App using CanvasJS. For more information, please follow other related articles on the PHP Chinese website!