How to export Sense mashup objects to images.

NZFei — Wed, 24 Jan 2018 22:37:02 GMT

Hi,

After putting Sense objects into mashup, I want to be able to right click the objects and then save them as images.

It is strange that I can only do that to pie charts.

For bar charts, I can only right click and save the legends as images.

If I right click the bar chart body, I see different options and I can't save it to images:

For table charts, I cannot save it as images at all.

I am not sure why to different objects, when I right click them, I have different options...

Can anyone provide any help please? If it is doable using API, how can I start with?

Thanks

Fei

Re: How to export Sense mashup objects to images.

Thiago_Justen_ — Sat, 27 Jan 2018 11:19:53 GMT

Maybe this will help you:

Capturing Image of Qlik Sense Objects in Mashups

Re: Qliksense Mashups Image-Export

Cheers

Re: How to export Sense mashup objects to images.

jasonmomoa — Mon, 29 Jan 2018 07:58:47 GMT

Hello xufei123,

Let me explain you what i got from the same issue long time ago.

Current Qlik Sense API does not provide an export image functionality as it does with exportData method‌ which only exports data in table format. If you want to create a similar functionality as in the hub you will l need to:

1. Create the functionality that gets a specific screenshot of your chart.

2. Create a right click menu (most probably will override the default right click functionality of browsers).

As per the first point, I achieved to get a snapshot of the visualization by using html2canvas. Look around for some basic examples. See the behavior below:

app.obj.app.getObject(value.firstChild.id).then(function(model) {

// Get object

var qObject = document.getElementById(model.id);

// Transform qObject to canvas

html2canvas(qObject, {

onrendered: function(canvas){

// Download in png format

// .empty is a html class that will render the canvas of your object into the <div> tag

angular.element('.empty').attr('href', canvas.toDataURL("image/png"));

// give the file a name

angular.element('.empty').attr('download', 'test');

angular.element('.empty')[0].click();

}

});

app.obj.qlik.resize();

});

As per the second point, you can look around an easily find some examples on right click menus using javascript. Myself, I created a dropdown menu to let the user choose whether to download a screenshot of the chart or download the data in csv format. That way, I was not overriding any right click functionality. Also, one of my requirements was to use the dashboard on a touchable screen.

Hope this helped you 🙂

Regards,

topic How to export Sense mashup objects to images. in App Development

How to export Sense mashup objects to images.

Re: How to export Sense mashup objects to images.

Re: How to export Sense mashup objects to images.