Incorporating Highchart into Email Template

Consider a scenario in which the client requests the incorporation of a Highcharts representation into the email template, precisely as it appears on the web page. Sounds simple and straightforward, right? However, there are several underlying complexities that make it difficult to implement this requirement.

In this post, we are discussing a similar request we received from one of our clients and how we managed to achieve it.

Highcharts is a JavaScript library that enables users to generate interactive and visually appealing charts on the client side of a site. The client’s desire to embed the same chart as a report in the mail template created a bottleneck. This is largely due to the prohibition against integrating client-side rendered charts into email templates. Let’s delve deeper into the client’s requirement and how we found a solution to meet it.

Highcharts Email-Template Integration

To begin with, let us clarify by saying this is impossible. Due to email-client restrictions, HTML content generation is not possible on the client side. The client’s website displays a HighCharts representation for each user and their resource consumption. When clicked, the email template should automatically embed the same report.

In short, the primary requirement here is to generate a report based on the Highcharts data and share it via email in a PDF format. The report shared should mimic the exact chart displayed for the selected user on the web page.

What we first explored was the possibility of using a third-party service to recreate this visual on the email template. It is not possible to render the exact same visual as it appears on the website. Therefore, we dismissed this option and continued our search for alternative solutions.

As we started to dig deeper to find alternate ways to make this possible, we stumbled on Puppeteer.

Highcharts Integration with Puppeteer

As we were moving through the entangled maze of bringing in a customer’s Highcharts graph into the email template, Puppeteer was the key we found. We realized that Puppeteer’s integration of Highcharts representations into the mail template could overcome all the limitations we faced earlier.

Using Puppeteer, we were able to make use of a headless browser instance, Chromium, in a programmatic way. We can use this browser engine to render webpages, fetch the required data, and generate effective outputs. For Chromium, Puppeteer can fetch the HTML content and send it for rendering. This way, we can render charts as they are displayed on a page. Once you have developed the chart exactly as it appears on the website, you can use Puppeteer to take a screenshot of this representation and embed it in the mail template.

Let us now break down this process of tackling the hiccup of HighCharts report generation and embedding the output into a mail template, all with a button click.

Rendering Highcharts Representations into a Mail Template

Now, it is time to address the elephant in the room—the task that seemed impossible initially. Understanding puppeteer is essential to comprehend the process of rendering HighCharts data exactly as it appears on a web page. Puppeteer is a tool for programmatically controlling headless browser instances, such as Chromium or Chrome. Here, we are leveraging Puppeteer’s features by envisioning it as a bridge between an HTML page and converting selected contents from the page to generate a PDF report. This will help us integrate dynamic charts into other applications and platforms.

Step 1: Launch Puppeteer

Puppeteer is basically a library that provides high-level APIs to establish communication with the headless Chromium instance. To begin, install Puppeteer in your environment. Once Puppeteer is installed, you can launch a headless browser instance using the ‘puppeteer.launchAsync()’ method.

Step 2: Navigate to the Highcharts Data

After launching the chromium instance, you can use the ‘page.goto()’ method of puppeteer to navigate to the desired endpoint. The endpoint represents the URL where the required Highcharts data is available. Depending on your requirements, you can also fetch this from a server-side endpoint. You can direct the method to a database query endpoint, a RESTful API, or a webpage that contains the Highcharts data.

Step 3: Server-Side Interaction and Extraction

Puppeteer allows you to interact with the content of the web page or server once it establishes a connection with the endpoint. To make this possible, you can use methods such as ‘page.evaluate()’, ‘page.waitForSelector()’, ‘page.waitForNavigation()’, etc.

If you are using an API to fetch the data, the ‘fetch()’ method can be used to extract the data. Another alternative is to interact with data using HTTP requests placed inside the ‘page.evaluate()’ method.

Step 4: Rendering Highcharts

After extracting the necessary data, it’s time to customize the Highcharts representation. Javascript can assist in creating a Highcharts configuration object. This object will usually consist of details such as the type of chart, data series, axes, labels, and other visual properties of the chart. The Highcharts rendering engine receives this constructed configuration object and generates the chart dynamically.

Step 5: Capturing Screenshots and Embedding them in the Mail Template

Puppeteer comes with a ‘page.screenshot()’ method that can be called to capture a screenshot of the rendered Highcharts chart. Using a template engine or HTML manipulation libraries, you can automatically embed the captured screenshot into your email template as needed.

Here is a snapshot of how we managed to incorporate a client’s Highcharts graph into the email template using Puppeteer and Chromium:

using System;
using System.IO;
using System.Threading.Tasks;
using PuppeteerSharp;
class Program
{
static async Task Main()
{
await GeneratePdfWithHighcharts();
}
static async Task GeneratePdfWithHighcharts()
{
// Initialize Puppeteer
await new BrowserFetcher().DownloadAsync().ConfigureAwait(false);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true,
IgnoredDefaultArgs = new string[] { “–disable-extensions” },
Args = new string[] { “–no-sandbox” },
ExecutablePath = chromiumLauchUrl
}).ConfigureAwait(false);
var page = await browser.NewPageAsync().ConfigureAwait(false);
using var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true });
using var page = await browser.NewPageAsync();
await page.SetContentAsync(htmlContent, new NavigationOptions { WaitUntil = new[] { WaitUntilNavigation.Networkidle2 } });
await page.WaitForSelectorAsync(“.charts”);
await page.EvaluateExpressionAsync(@”
const divElement = document.querySelector(‘.charts’);
if (divElement) {
divElement.classList.add(‘charts’);
}
“);
var pdfOptions = new PdfOptions
{
Format = PaperFormat.Letter,
PrintBackground = true,
Landscape = true,
Scale = (decimal)0.5,
DisplayHeaderFooter = true,
HeaderTemplate =””,
FooterTemplate =””,
MarginOptions = new MarginOptions
{
Top = “25px”,
Bottom = “25px”,
Left = “25px”,
Right = “25px”,
}
};
pdfData = await page.PdfDataAsync(pdfOptions).ConfigureAwait(false);
}
}

In this C# program, we have leveraged PuppeteerSharp to automate the generation of a Highcharts representation as a PDF document. The ‘BrowserFetcher()’ method used in the program downloads the Chrome browser. The ‘Puppeteer.LaunchAsync()’ method is used to launch the browser instance. A new page is created in the browser by calling ‘browser.NewPageAsync()’.

The Highcharts configuration is defined using C#. This configuration is then utilized to create a Highcharts chart as required.

Final Word

Though the client’s requirement to embed the Highcharts chart generated in the browser page into the email template was a genuine one, the email-client restriction made us stumble a bit. Thanks to Puppeteer, we were able to come up with a solution!

This blog not only addresses the specific client requirements but also showcases the versatility and power of Puppeteer and Chromium integration in web development. Our team of developers at Expeed Software reaffirmed the importance of staying up to date with trends and thinking creatively in order to solve such an intricate issue. Combining Puppeteer and Chromium to embed Highcharts charts in a different environment opened a lot of possibilities for generating and sharing statistical data with customers. As we continue refining technologies to find the best ways to satisfy our clients, Expeed Software has its doors wide open for new challenges from the Digi-world!