Add Chart to Word template

2

Hi,
Something came to my mind about putting a chart in Picture field, so I will share.

Using html2canvas - https://html2canvas.hertzen.com/
we can take screenshot of chart, and then pass it to picture field.

Some sample:

function copyChart() {
html2canvas(document.getElementById("SEL_Chart_2689")).then(function(canvas) {
var img = canvas.toDataURL("image/JPEG", 1.0);
SetValue('#{FLD:2691}#', img);
});
}

<button onclick="copyChart()">Save chart</button>

- "SEL_Chart_2689" is an div with chart - number '2689' is Chart field ID
- '#{FLD:2691}#' - Picture field

Now, if you include html2canvas and function above in HTMl field, by clicking button screenshot of chart will be passed to picture field.
But as I said, only an idea and there might be a better solution.

Hi, thanks for the idea, however, I am having some implementations issues. How do I include html2canvas into the field operation? Is there a was to upload or include a javascript from the CDN?

Best regards

Aleš

I just copy-pasted source of "html2canvas.js" to HTML field - you can get it from website (attachment).
I see that there is also cdn - https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js
So it is up to you how to include it.
If you ask how to include it in HTML field - treat it like html file, you can include js code in <script></script> tags, or <script src="URL"></script> for cdn.

Sebastian, thank you.

I have already tried this but with no luck, so I thought I was doing sth wrong in this regard.

I get syntax error and will explore where I am wrong.

If I understand correctly you were able to implement this?

Best regards

Aleš

Hi, try code below - dont forget to change fields ID:

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
function saveChart() {
html2canvas(document.getElementById("SEL_Chart_2689")).then(function(canvas) {
var img = canvas.toDataURL("image/JPEG", 1.0);
SetValue('#{FLD:2691}#', img);
});
}
</script>
<button onclick="saveChart()">Save chart</button>

It looks like the cdn version is older and I am getting an error using it too.
Works with the current library version from http://html2canvas.hertzen.com/

Hi,

This works. I only needed to add for "SEL_Chart_2689" additional text as "SEL_Chart_2689-chart-placeholder".

Thank you for the solution.

Best regards

Aleš