how to use Highcharts library in the email.

[Luca_Lattarini]

Hello everyone,

I am trying to use highcharts library in the email but I m getting an empty image. Any idea?

Basically I am using a simple JS code where I m gathering all information I need create edm by code as showed below

var xmlTargeting = <delivery>
<targets >
<deliveryTarget>
<targetPart exclusion='false' ignoreDeleteStatus='false'>
<where>
<condition expr={'@id=' + 6952894}/> // Recipient ID
</where>
</targetPart>
</deliveryTarget>
</targets>
</delivery>;

/// create template

var finalDev = nms.delivery.CreateFromModel('ssgWeeklyReportProfile', xmlTargeting); // Delivery internal name ( Template )
var deliv = nms.delivery.create(finalDev);

var str= "<script src='https://code.highcharts.com/highcharts.js'></script>"
+"<script src='https://code.highcharts.com/modules/exporting.js'></script>"
+"<script src='https://code.highcharts.com/modules/export-data.js'></script>"
+"<script src='https://code.highcharts.com/modules/accessibility.js'></script>"
+"<STYLE>"
+".highcharts-figure,"
+".highcharts-data-table table {"
+"min-width: 310px;"
+"max-width: 800px;"
+"margin: 1em auto;"
+"}"

+"#container {"
+"height: 400px;"
+"}"
+".highcharts-data-table table {"
+"font-family: Verdana, sans-serif;"
+"border-collapse: collapse;"
+"border: 1px solid #ebebeb;"
+"margin: 10px auto;"
+"text-align: center;"
+"width: 100%;"
+"max-width: 500px;"
+"}"

+".highcharts-data-table caption {"
+"padding: 1em 0;"
+"font-size: 1.2em;"
+"color: #555;"
+"}"

......... 

deliv.mailParameters.subject="Monthly EDM KPI Reports"+formatDate(new Date(), "%2D/%2M/%2Y");
deliv.content.html.source=str; /// link string to html

deliv.save();
nms.delivery.PrepareFromId(deliv.id);

[Marcel_Szimonisz · Accepted solution]

Hello @luca,

JavaScript cannot be used in the email. It is all about the images when you want to pull in some charts. You would need to create your own end point, which outputs image with chart etc. , then use that url as image in your email template.

Marcel Szimonisz

MarTech Consultant
for more tips visit my blog
https://www.martechnotes.com/

[Luca_Lattarini]

Hello @Marcel_Szimonisz Yes, I am following your advise. Do you suggest some specific library to generate some charts or create programmatically some chart by using adobe campaign reports?

Thanks

Luca

[Marcel_Szimonisz]

Hello @Luca_Lattarini ,

I have found API to do what I tried to explain https://quickchart.io/documentation

If you can you might do it by yourself inside JSSP page (or web app) hosted on adobe campaign or any other self hosted page. Take a look here for self hosted service (not in adobe) https://flaviocopes.com/canvas-node-generate-image/ 

Or you can try to create such image and retrieve its base64 before hand and then insert it as image in the email passing it there as variable. 

https://stackoverflow.com/questions/20206038/converting-chart-js-canvas-chart-to-image-using-todatau...

Hope that helps,

Marcel

[David_Loyd]

 I've used moment JS before in workflows and deliveries. You may need to process all your JS in a workflow then  transfer them from instance.vars to delivery.vars, meaning you need to declare your workflow variables as delivery variables. Then you can call them in the email.

Check out this article.

https://blog.floriancourgey.com/2018/10/use-javascript-libraries-in-adobe-campaign/