0
146
ViewsHow to implement Save as PNG in Vega using custom menu
I am building a data dashboard using Vega to visualize the outputs, and to accomplish that I've removed the actions dropdown and replaced it with a custom menu system. I would like to incorporate the "Save as PNG" option that exists in the original dropdown (example provided in image below) into my own menu though, since I assume the architecture for creating the image already exists, works well, and should be relatively simple to port over. But I have no idea how I might go about referencing those actions separate from the original menu.
How can I link the Save as PNG functionality to a button that exists outside of the Vega actions dropdown?
1 answers
Answer question0
The Vega view API has metohd toImageURL() that enables users to download the chart image as PNG file.
https://vega.github.io/vega/docs/api/view/#image-export
In a dashboard, there may be multiple Vega view objects for various charts. For the dashboard menu, here is an example function in javascript with Vega view object and download filename as arguments:
function vegaDownloadChartImage(vegaView, downloadFileName){
vegaView.toImageURL('png').then(function(url) {
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('target', '_blank');
link.setAttribute('download', downloadFileName);
link.dispatchEvent(new MouseEvent('click'));
}).catch(function(error) { /* error handling */ });
}
Example HTML button for user to download image file (myVegaChart1.png):
<button onclick="vegaDownloadChartImage(view_1, 'myVegaChart1')">Download PNG file</button>