Sorry for the incomplete answer. I just want to leave main points as a placeholder and add some more detail when you confirm my assumptions I've made in my comment to the question, of correct me and clarify.
In this comment, I explained the reasons for processing on both client-side and server-side.
Your steps would be
- Data (Server-side) to JavaScript (client side);
- Client side: JavaScript generates chart (which remains static);
- Client side: optional request to send mail, data sent back via Ajax;
- Server side: compose e-mail from data, send it;
Can you see the redundancy? The data is already on the server side, and this is where you send e-mail. I don't know the detail of your scenario, who and what should trigger the e-mail operation, but here is how it looks: the server-side code gets the HTTP request, without any graphics on the client side, generates graphics from data (which is also on the server side) directly, composes and sends e-mail. And then the chart can be directly rendered in a bitmap.
There is a problem with that: you have to have two different methods of generation of the same chart: one on the server side, and another on the Canvas, that is, by JavaScript on the client side. Unless you use server-side JavaScript (rare enough these days), it would be two completely different libraries. You would have to achieve logically identical charts by technically different ways. This is doable, but still would be a problem, the problem of development, but even more of maintenance.
This problem can be solved if you get rid of Canvas. I can see two more options: 1) generate all graphics on the server side only as a bitmap; 2) generate all graphics on the server side only as SVG. In both cases, the graphics can be delivered to the client side a the ready-to-show object. If this is a bitmap, it could be embedded in HTML as the
img
element with
href="your-file.PNG"
; the same exact file will be embedded in the e-mail HTML part when required. The case of SVG is "infinitely better", because this is vector graphics. Another benefit is using much less traffic than with good-quality bitmap. It can also be sent in e-mail and rendered in HTML (HTML5 required). The big benefit is: JavaScript is not required. You can make the chart dynamic on the client-side with JavaScript, but the chart can be static and just embedded in HTML without any scripts, which would be suitable for e-mail. It is impossible to achieve with Canvas.
There are other benefits of SVG over canvas. The graphic rendering quality is better in some respect. And you can have quite advanced charting based on SVG. To get the feeling of it, please pay attention for D3:
D3.js — Wikipedia, the free encyclopedia[
^],
D3.js — Data-Driven Documents[
^],
and some impressive examples:
D3.js Gallery[
^].
By the way, I found a post explaining "Why not Canvas?":
How to Make Charts with SVG | CSS-Tricks[
^].
This article overviews some other possibilities based on SVG. You can probably find some more:
SVG charts[
^].
Before you asked about sending a chart in e-mail, you had quite viable Canvas-based solution, in your case, via chart.js. The mailing requirement essentially breaks this solution; it starts to present ridiculous difficulties, which can be easily avoided in the alternative ways.
[EDIT]
I did not know Solution 1, but it can make some alternative. However, there is the same issue for sending e-mail. It can be solved by getting the obtained image data and sending it back to the server side, where the image data can be used to make a bitmap for sending via e-mail.
—SA