Exporting several HighCharts graphs to Powerpoint slides

Question

we are planning to build a Angular based web application which has about 15-20 different charts rendered using HighCharts. The requirement is to export those charts into PPT slides.

I know that HighCharts provides an export to image option. We can then embed that image in a PPT slide. We are planning to use Ruby and we have a ruby gem which does that. (We are not restricted to Ruby though, and there is one Node module which does the embed-image-in-ppt as well).

Now the challenge is - the client wants all the graphs to be downloaded as PPT upon a single click. This means, HighCharts would not have 'rendered' any of the graphs when the user clicked the button.

Question: Is there any way we can export all those graphs (which were never rendered, but we can get the data for those graphs via APIs) into images in one click?

We have thought about a few ways of doing it: 1. Load all the graphs but keep them hidden. Invoke HighCharts export function without the user knowing it and download all images and then embed them in PPT. [It sounds too inefficient to me as there might be huge graphs which might make the page too slow].

2. Use a headless browser which will pseudo-render the charts and also export them to images and then embed to PPT. (The folks I spoke to mentioned PhantomJS, but I have no experience). We also have authentication and if it's a headless browser, we'll have to login again (I can be wrong here).

3. Some sort of offline conversion and email the ppt to the user? I don't even know how this will look like in implementation.

Has anyone ever done it before or have suggestions on how to go about it?

Answer 1

I would improve your first solution:

• on the client side, gather options for Highcharts charts
• send AJAX to Highcharts server with options for each of the charts. Returned will be base64 or URL to the image on the server
• when all data will come back from your Highcharts server, use another AJAX to post URLs/images to your backend
• in your backend (Ruby, nodeJS, whatever) gather images and generate PPT

For first three steps, here is simple implementation: http://jsfiddle.net/3dptu2s3/

And code (Note: you don't have to load Highcharts library):

• some basic options:

  var chartOptions = {
      exporting: {
          url: 'http://export.highcharts.com/'
      },
      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      series: [{
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }]
  };
  

• exporting logic:

  var obj = {
          options: JSON.stringify(chartOptions),
          type: 'image/png',
          async: true
      },
      exportUrl = chartOptions.exporting.url,
      imgContainer = $("#container");
  
  var calls = [];
  
  for (var i = 0; i < 4; i++) {
      calls.push({
          type: 'post',
          url: exportUrl,
          data: obj,
      });
  }
  
  $.when(
      $.ajax(calls[0]),   
      $.ajax(calls[1]),
      $.ajax(calls[2]),
      $.ajax(calls[3])
  ).done(function (c1, c2, c3, c4) {
      var urls = [];
      $.each(arguments, function(i, chart) {
          urls.push(exportUrl + chart[0]);
          /*
              Here you can send URLs to the backend:
              $.post("url/to/backend", urls, function(data) {
                  console.log(data);
              })
          */
      });
  });
  

In fact, you can communicate by AJAX without using frontend. Use AJAX calls directly from your backend if you want to.