FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Send chart through email templates › Reply To: Send chart through email templates

December 26, 2018 at 10:46 pm #23865

Indranil

@rahultanwar,

For security reasons, modern email providers have disabled Javascript for incoming emails. Hence, it is not possible to integrate CanvasJS Charts directly in an email.

However, you can render the chart on server-side using a headless browser like PhantomJS, then captures the chart image from a web page, save it to a particular location and use the same within your email template.

Below is the sample code to render a chart using PhantomJS and save it as an image –

"use strict";
var page = require('webpage').create();
page.viewportSize = { width: 600, height : 600 }; 
page.content = '<html><body>HELLO<div id="chartContainer" style="height: 370px; width: 100%;"></div></body></html>';
var now = new Date();
if(page.injectJs('./canvasjs.min.js')){ //inject the CanvasJS file. Set the file path accordingly
  page.evaluate(function(fs) {
    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: false,
      title:{
        text: "Basic Column Chart"              
      },
      data: [              
        {
          type: "column", //change chart type to 'pie', 'line', 'area', etc
          dataPoints: [
            { label: "apple",  y: 10  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
          ]
        }
      ]
    });
    chart.render();
  });		
}

//Use clipRect if only a part of page has to be captured
var clipRect = page.evaluate(function() {
  return document.getElementById("chartContainer").getBoundingClientRect();
});

//Comment below line to render entire page		
page.clipRect = {
  top : clipRect.top,
  left : clipRect.left,
  width : clipRect.width,
  height : clipRect.height
};

console.log(now);
page.render("BasicColumnChart"+" " +now.getHours()+"h "+now.getMinutes()+"m "+now.getSeconds()+"s "+".png"); //This line captures required parts of the page, comment this line to capture the entire page. 
//Here, the image is stored in the same directory as of Phantom Project. Specify the required location to save the image Ex: D:/charts/BasicColumnChart.png

phantom.exit(0);

Please download the sample project from this forum thread for a working example.

Render Chart on server-side using PhantomJS

___________
Indranil Deo
Team CanvasJS