Download a plotly figure from a custom component

Queries and Resources
1

Hey,

I am trying to download a plotly graph that I have created in a custom component. Facing some difficulty to try and download the chart I have created. Does anyone know how to approach this?

2

Hey Muim, How you could do this and if it's possible depends on a few things, namely how you've set up your custom component and to what file type you're looking for. Retool does have two util functions that may be helpful here. Using utils.downloadPage you could download a PDF view of your chart on the page.

1130×586 74.2 KB

And using utils.downloadFile you could download the JSON itself as a 'json' file.

1132×316 34.1 KB

You could script either of these util functions in a JS query and pass them to your custom component. I hope that helps and if not, please let us know more about your custom component and how you're trying to download this chart!

3

Hey, I will try this out and let you know if this soloution works for my custom component. Just wondering is there a way to download a single plotly chart component using the utils.downloadFile?

4

Hey Muin, I took a deeper dive into this and I found a way to download a Custom Plotly Component as an image. Here's a crude example of how you can set that up.

1278×1046 112 KB

I needed to use Plotly's Plotly.toImage to create an image file from the graph.

1402×650 61 KB

Then I needed to update the custom component's model with this image file to pass the file out of the custom component and download the image from Retool using utils.downloadFile with some logic in a JS Query that I trigger in my Custom Component (Plotly.downloadImage doesn't work in the Custom Component Iframe).

2214×1790 781 KB

I hope this works for your use case :slightly_smiling_face: Let me know if I can clarify anything!

5

This looks wonderful!

Does it work for native retool Charts?

6

Hey @bg1900! Have you considered using the downloadPage utility? With it, you can select just your chart and have it exported as a PDF:

utils.downloadPage("users_dashboard", { componentsToInclude: ["yourChart"] });

Let me know if that works!

7

Hello @Kabirdas What are the options if we have combination of both native charts and custom component plotly charts in a page since the utils.downloadPage doesn't support custom component download

8

Hey @Hakesh_Kolukonu!

If you're looking to download a plotly chart from a custom component you'll likely need to use a more involved method like the one @everett_smith describes above. Since you're using a combination of the two the best options I'm thinking of are to:

  1. Download each chart individally
  2. Use a JS query to generate the plotly JSON you need to render your custom component charts using the built-in component (more on that here)
  3. Copy the plotly JSON for the data source and layout into a transformer and use it as inputs for the custom component model to render built-in charts in your then download everything together from a single custom component

Hopefully one of those can work for your use case :crossed_fingers:

Otherwise, it is a known request to be able to download custom, HTML, and iFrame components using utils.downloadPage. Though it's currently in the backlog and there aren't concrete plans to implement it, we can try and let you know here if it does get included!