I am trying to render a Plotly OHLC plot in my chart.ejs file and pass a variable called result to it. However, when I attempt to use EJS templating to include result in the chart.ejs file, the plot does not display. I also tried using <script> tags for the logic, but the plot still doesn’t show. I made another file chart.js to contain the logic concerning the plot but I’m not sure how to make it work.
What could be causing this issue, and how can I successfully render the Plotly OHLC plot with the result data in my EJS template?
index.js:
import express from "express";
import axios from "axios";
const app = express();
const port = 3000;
app.use(express.static("public"));
app.set("view engine", "ejs"); // Set EJS as the view engine
const base_url = "https://api.coingecko.com/api/v3";
app.get("/", (req, res) => {
res.render("index.ejs", { result: null, error: null });
});
app.get("/ohlc", async (req, res) => {
const { id, currency, days } = req.query;
if (!id || !currency || !days) {
return res
.status(400)
.json({ error: "Please provide id, currency, and days parameters." });
}
try {
const ohlc_result = await axios.get(`${base_url}/coins/${id}/ohlc`, {
params: {
vs_currency: currency,
days: days,
},
});
let day = [];
let open = [];
let high = [];
let low = [];
let close = [];
for (let i = 0; i < ohlc_result.data.length; i++) {
const unix_timestamp = ohlc_result.data[i][0];
const date = new Date(unix_timestamp);
const formattedDate = date.toISOString().split('T')[0];
if (!day.includes(formattedDate)) {
day.push(formattedDate);
open.push(ohlc_result.data[i][1]);
high.push(ohlc_result.data[i][2]);
low.push(ohlc_result.data[i][3]);
close.push(ohlc_result.data[i][4]);
}
}
// Create the OHLC trace
const result = {
x: day,
open: open,
high: high,
low: low,
close: close,
type: "ohlc",
increasing: { line: { color: "#17BECF" } },
decreasing: { line: { color: "#7F7F7F" } },
};
console.log("OHLC Result:", ohlc_result.data);
console.log("Formatted Result:", result);
res.render("chart.ejs", { result: result });
} catch (error) {
console.log(error.message);
res.status(500).send(error.message);
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
chart.js:
const trace = {
x: result.x,
open: result.open,
high: result.high,
low: result.low,
close: result.close,
type: "ohlc",
increasing: { line: { color: "#17BECF" } },
decreasing: { line: { color: "#7F7F7F" } },
};
const layout = {
title: "OHLC Chart",
dragmode: "zoom",
xaxis: {
title: "Date",
type: "date",
},
yaxis: {
title: "Price",
type: "linear",
},
};
Plotly.newPlot("ohlc-result-div", [trace], layout);
chart.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoLens</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
<script src='https://cdn.plot.ly/plotly-2.35.2.min.js'></script>
<!-- <script src="/chart.js" defer></script> -->
</head>
<body>
<h1>OHLC Chart</h1>
<!-- THE FOLLOWING DOES NOT WORK -->
<!-- <script>
const trace = {
x: result.x,
open: result.open,
high: result.high,
low: result.low,
close: result.close,
type: "ohlc",
increasing: { line: { color: "#17BECF" } },
decreasing: { line: { color: "#7F7F7F" } },
};
const layout = {
title: "OHLC Chart",
dragmode: "zoom",
xaxis: {
title: "Date",
type: "date",
},
yaxis: {
title: "Price",
type: "linear",
},
};
Plotly.newPlot("ohlc-result", [trace], layout);
</script> -->
<div id="ohlc-result-div"><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
</html>
I understand that there is some issue with sending over result to chart.ejs, I’m just not sure what.