How to export a Highcharts Graph in appfarm?

Ask the community
1

Hi. I am trying to export a highcharts graph as a JPEG to a file on my local computer, but are having problems.

I am importing all the relevant highcharts scipts and modules using the UI in appfarm:
Uten navn

However, when I am trying to use one of the functions from the offline-export.js module, I get an error saying that the function does not exist.

image
image749×336 19.5 KB

Could it have something to do with the fact that they are modules?

image
image701×228 13.4 KB

Do you have any suggestions on what might cause this?

Best Regards,
Fridtjof

2

Getting these errors in the console:

image
image1716×358 50.3 KB

3

Hi Fridtjof!

Appfarm cannot directly assist with third-party library usage in a Coded Component script, however we will keep this topic open so that other community members can assist

If you believe your issue is a problem with Appfarm’s Coded Component specifically, we ask for a reproduction case outside of Appfarm – for example in JSFiddle – so that we can rule out any library usage issues.

That said: downloadSVGLocal may be of help, see this JSFiddle: Highcharts test tool - JSFiddle - Code Playground

4

Thanks.

Could it have something to do with this error message?

image
image852×220 14.3 KB

5

Here is a example in JSFiddle: Highcharts Demo - JSFiddle - Code Playground

6

The code in the JSFiddle works in a fresh Coded Component on our end.

Normally source map errors can be ignored. But it’s slightly suspicious that exporting.js is being loaded from a Google Storage domain.

Could you verify your Coded Component resources that they contain the correct script references? (without any leading slashes etc.)

7

I’ve double checked now. Getting this error:

image
image992×425 31.2 KB

Can you show me how you implemented the code?

8

Resources:

  • https://code.highcharts.com/highcharts.js
  • https://code.highcharts.com/modules/exporting.js
  • https://code.highcharts.com/modules/offline-exporting.js

HTML content:

<div id="container"></div>
<button id="button">Download chart</button>

Script content:

const chart = Highcharts.chart('container', {
  exporting: {
    fallbackToExportServer: false
  },

  title: {
    style: {
      color: '#000',
    }
  },

  series: [{
    data: [71, 106, 129, 176, 135, 148, 216, 194, 54]
  }]
});

const button = document.getElementById('button');

button.addEventListener('click', function() {
  chart.exportChartLocal();
});
9

Thanks. I was able to make it work in our admin app, but not in our main app.

I cant seem to figure out what the difference between them are in this regard. Do you have any clue where the issue might lie here?