Render Charts on the server
Server-side generation of charts without the use of a web client. It’s the perfect solution for email and report generation. More information is in this link.
Usage Example
The idea is straightforward. You can send a JSON to the node export server's endpoint and get an image or pdf according to the data.
Example of JSON:
{
"infile": {
"title": {
"text": "Steep Chart"
},
"xAxis": {
"categories": [
"Jan",
"Feb",
"Mar"
]
},
"series": [
{
"data": [
29.9,
71.5,
106.4
]
}
]
}
}
Highchart export server as Docker Container
The project exists as an npm package at https://www.npmjs.com/package/highcharts-export-server. But the last version was deployed two years ago. So I will tell you what problems you can find in the process.
1. The project installed from npm presents some issues. So I recommend you better clone the project and make the following changes:
let schema = {
properties: {
agree: {
description: 'Agree to the license terms? y/n',
required: true,
default: 'yes',
message: 'Please enter (y)es or (n)o',
conform: boolConform
},
During the installation, it is necessary to accept the terms of the license. With this, you will have already answered yes and it will not give problems at the end of the installation.
2. We create a Dockerfile with this content:
FROM node:carbon
ENV ACCEPT_HIGHCHARTS_LICENSE="1"
ENV HIGHCHARTS_USE_STYLED="1"
ENV HIGHCHARTS_USE_MAPS="1"
ENV HIGHCHARTS_USE_GANTT="1"
ENV HIGHCHARTS_VERSION="10.3.3"
ENV OPENSSL_CONF=/dev/null
#RUN npm install highcharts-export-server -g --unsafe-perm
COPY ./node-export-server /node-export-server
RUN cd node-export-server && npm install && npm link
RUN node /usr/local/lib/node_modules/highcharts-export-server/build.js
RUN npm install
WORKDIR /usr/share/fonts/truetype
ADD fonts/OpenSans-Regular.ttf OpenSans-Regular.ttf
ADD fonts/OpenSans-Light.ttf OpenSans-Light.ttf
ADD fonts/OpenSans-Semibold.ttf OpenSans-Semibold.ttf
ADD fonts/OpenSans-Bold.ttf OpenSans-Bold.ttf
ADD fonts/OpenSans-ExtraBold.ttf OpenSans-ExtraBold.ttf
ADD fonts/OpenSans-Italic.ttf OpenSans-Italic.ttf
ADD fonts/OpenSans-LightItalic.ttf OpenSans-LightItalic.ttf
ADD fonts/OpenSans-BoldItalic.ttf OpenSans-BoldItalic.ttf
ADD fonts/OpenSans-SemiboldItalic.ttf OpenSans-SemiboldItalic.ttf
ADD fonts/OpenSans-ExtraBoldItalic.ttf OpenSans-ExtraBoldItalic.ttf
COPY ./api /api
COPY start.sh /api/start.sh
WORKDIR /api
RUN npm install && chmod +x ./start.sh
EXPOSE 8080
CMD ./start.sh
Unfortunately, the version that exists as an npm package presents many issues as you can find in the project forum. So I recommend you better clone the project and use version 10.3.3. This version uses phantom js which is already deprecated but still works. New versions have it problem:
The problem stems from the fact that Highcharts v11 now uses ES6 (and Highcharts v10 was still in ES5 standard) so now let and const are used instead of vars. PhantomJS is now deprecated and has no support for standards higher than ES5.
There is a branch in the Github Repo (enhancement/puppeteer) that migrates to puppeteer but doesn't exist good documentation yet and is still in development. Also with this new branch some templates to generate charts that you find in the examples are not yet supported.
3. Additionally we need some fonts for the project to work perfectly.
4. I recommend creating an endpoint for the health check of its service using express.
package.json:
{
"name": "highcharts-export-server-helthcheck",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"ip": "^1.1.8"
}
}
index.js:
let express = require('express');
let app = express();
const IP = require('ip');
const ipAddress = IP.address();
const running_since = new Date().toISOString().
replace(/T/, ' '). // replace T with a space
replace(/\..+/, '');
app.get('/', (req, res) => {
res.send("Highchart Export Server works!!")
});
app.get('/health', (req, res) => {
res.send({"Status": "ok", "Name": "highchart-export-service", "Running_since": running_since, "Version": "1.0.0", "Ip": ipAddress})
});
app.get('/health/', (req, res) => {
res.send({"Status": "ok", "Name": "highchart-export-service", "Running_since":running_since, "Version": "1.0.0", "Ip": ipAddress})
});
app.get('/', (req, res) => res.send({"status": "ok"}));
console.log('Service start listen in 7000')
app.listen(7000);
5. Finally the start.sh launch the index.js and highchart export server as two separate processes.
#!/bin/bash
export ACCEPT_HIGHCHARTS_LICENSE=yes
# Start the first process
node index.js &
# Start the second process
#cd ../node-export-server && npm start
highcharts-export-server --enableServer 1 --port 8080 --logLevel 4 &
# Wait for any process to exit
wait -n
# Exit with status of process that exited first
exit $?
6. Build your docker image:
docker build -t highchart-export-server-mine .
7. Run your container:
docker run -itd --name highcharts -p 8089:8080 -p 8009:7000 highchart-export-server-mine
8. Test the health check:
❯ curl localhost:8009/health
{"Status":"ok","Name":"highchart-export-service","Running_since":"2023-06-07 05:49:14","Version":"1.0.0","Ip":"172.17.0.2"}%
9. Test with curl:
curl -H "Content-Type: application/json" -X POST -d '{"infile":{"title": {"text": "Steep Chart"}, "xAxis": {"categories": ["Jan", "Feb", "Mar"]}, "series": [{"data": [29.9, 71.5, 106.4]}]}}' localhost:8089 -o testchar7.png
Deploying in AWS ECS
In the following article, I will explain how to mount it in AWS ECS
Thank you for reading this article, if we can help you with anything, do not hesitate to contact us at exoreaction.
Enjoy!
Joe
0 comentarios:
Publicar un comentario