Expand my Community achievements bar.

Announcing the launch of new sub-community for Campaign Web UI to cater specifically to the needs of Campaign Web UI users!
SOLVED

how to use Highcharts library in the email.

Avatar

Community Advisor

Hello everyone,

 

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

 

Luca_Lattarini_0-1649990089453.png

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);

 

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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/

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

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/

Avatar

Community Advisor

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

Avatar

Community Advisor

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

 

Avatar

Employee Advisor

 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/