Exporting multiple HighCharts visualizations to PowerPoint presentations

Question

Exporting multiple HighCharts visualizations to PowerPoint presentations

Our team is preparing to create an Angular-based web application featuring 15-20 unique charts utilizing HighCharts. One of the key requirements is the ability to export these charts into PowerPoint slides.

We are aware that HighCharts offers an option to export images. We plan to utilize a Ruby gem for embedding these exported images into PPT presentations, although there is also a Node module available for this purpose if needed.

However, the main challenge lies in the client's request for all graphs to be downloaded as a single PPT file with just one click, without any prior rendering of the charts by HighCharts when the button is clicked.

Question: Is there a way to export all these unrendered charts (with data retrieved from APIs) into images with a single click?

We have brainstormed a few potential solutions: 1. Load all charts but keep them hidden. Trigger the HighCharts export function invisibly upon click, download all images, and then embed them in a PPT. [This method may not be efficient, especially for large graphs that could slow down page loading.]

Utilize a headless browser to pseudo-render and export the charts as images before embedding them in a PPT. PhantomJS was suggested by some experts, though our concerns include authentication issues and re-login requirements with a headless browser.
Explore options for offline conversion and sending the PPT via email, although implementation details remain unclear at this stage.

If anyone has experience with or suggestions regarding this process, we would greatly appreciate your insights.

javascript ruby angularjs highcharts powerpoint

Answer 1

Answer №1

If you want to enhance your initial solution, here's a suggested approach:

Start by collecting options for Highcharts charts on the client side
Send AJAX requests to the Highcharts server with the chart options; in return, you will receive either a base64 image or a URL pointing to the image on the server
Once all the data is returned from the Highcharts server, use another AJAX request to post the URLs/images to your backend
In your backend (whether it's Ruby, nodeJS, or any other language), gather these images and compile them into a PowerPoint presentation

For an example implementation of the first three steps, you can refer to this simple code snippet: http://jsfiddle.net/3dptu2s3/

Below is the code snippet for handling basic options (Note: there's no need to load the Highcharts library):

Basic chart 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);
            })
        */
    });
});

Just a note, if needed, you can make AJAX calls directly from your backend without involving the frontend.

Answer 2

If you want to enhance your initial solution, here's a suggested approach:

Start by collecting options for Highcharts charts on the client side
Send AJAX requests to the Highcharts server with the chart options; in return, you will receive either a base64 image or a URL pointing to the image on the server
Once all the data is returned from the Highcharts server, use another AJAX request to post the URLs/images to your backend
In your backend (whether it's Ruby, nodeJS, or any other language), gather these images and compile them into a PowerPoint presentation

For an example implementation of the first three steps, you can refer to this simple code snippet: http://jsfiddle.net/3dptu2s3/

Below is the code snippet for handling basic options (Note: there's no need to load the Highcharts library):

Basic chart 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);
            })
        */
    });
});

Just a note, if needed, you can make AJAX calls directly from your backend without involving the frontend.

Exporting multiple HighCharts visualizations to PowerPoint presentations

Answer №1

Similar questions

How to disable map zoom controls in react-leaflet

Error: Invalid character encountered during login script JSON parsing

Organizing a mat-table by date does not properly arrange the rows

jQuery failing to trigger onClick event for a specific group of buttons

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Positioning the Angular material menu (notification bar)

Implement jQuery Tabs in Brackets software to enhance user experience

Steps to retrieve an incorrect fruit when it is located as the initial item within the array

Unable to perform a fetch request in IE9 after the page has finished loading

AngularJS secondary controller experiencing malfunctions

Using React Bootstrap, you can ensure that only a single collapse opens at a time when rendering it with a map function. This allows you to display

How to Trigger a Callback Function in Angular Template?

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

Access to a custom Google Map via an API connection

Looking for guidance on utilizing pushState and handling onpopstate events?

Changing a callback function into a promise in Node.js for OpenTok integration

Utilizing Zend JSON encoding for seamless integration with JavaScript

Is it possible to customize the width of text color alongside a progress bar?

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Solving yarn conflicts when managing multiple versions of a package