Hello, I am working with exporting charts to pdf.
The problem is, that when I choose to expand all data, it only shows the views that are in view.
Is there a way to solve this without expanding the container?
I have attached a screenshot of the exported pdf, where you can see, that the fields are cut off, and another that shows the chart in the browser, and a scrollbar indicating that there is more data to be shown.
Hello,
Thank you for reporting the issue.
We will add the problem to our backlog. Our team will let you know if anything is changed on this point.
As for now, we suggest using one of the following workarounds to overcome this issue:
Resize the Flexmonster instance before exporting to PDF so that the whole legend area is visible. Next, perform the export and restore the component's dimensions.
We have prepared the JSFiddle that demonstrates this approach.
Our team would like to provide some additional explanations about the following code snippets used in the example:
First, Flexmonster's container should be wrapped with an additional div element. It is required to resize the component after it is initialized.
<div id="wrapper"> <div id="pivotContainer"></div> </div>
Next, set the width
and height
parameters of Flexmonster to 100%
. It allows fitting the component's dimensions correctly.
var pivot = new Flexmonster({ ... height: "100%", width: "100%" ... }
Finally, implement the function responsible for exporting. It should consider the current wrapper's dimensions, scrollHeight
, and scrollWidth
properties of the legend container.
function exportToPdf() { flexmonster.on("afterchartdraw", () => { //subscribe to the "afterchartdraw" event flexmonster.off("afterchartdraw"); //unsubscribe from the "afterchartdraw" event to avoid unwanted executions of the handler flexmonster.exportTo("pdf"); //perform export }) flexmonster.on("exportcomplete", () => { //subscribe to the "exportcomplete" event flexmonster.off("exportcomplete"); //unsubscribe from the "exportcomplete" event to avoid unwanted executions of the handler wrapper.style.height = currentHeight; //restore the wrapper's height wrapper.style.width = currentWidth; //restore the wrapper's width }) let wrapper = document.querySelector("#wrapper"); //get the wrapper element let legend = document.querySelector("#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-charts-view > div > div.fm-ui-element.fm-ui.fm-ui-container.fm-noselect.fm-chart-legend > div"); //get the legend's container let currentHeight = wrapper.style.height; //save current height let currentWidth = wrapper.style.width; //save current width wrapper.style.height = wrapper.clientHeight + legend.scrollHeight + "px"; //resize the wrapper's height to show all legend's container. 180 is a maximum legend's container height by default. This will trigger the "afterchartdraw" event wrapper.style.width = wrapper.clientWidth + legend.scrollWidth + "px"; //resize the wrapper's width }
Another approach is to export the pivot to HTML, adjust styling, and convert the result to PDF.
For example, use the destinationType: plain
parameter of the exportTo API call to get the stringified HTML. Next, change the legend's container dimensions and convert the result to PDF using the dedicated third-party library.
Please let us know if it works for you.
Feel free to contact us in case further questions arise.
Best regards,
Illia
Thank you, I have implemented your first suggestion. Out of curiosity I played around with your second suggestion. But I couldn't figure out how to export the html string to pdf?
flexmonster.exportTo('html', {destinationType: 'plain'}, (res) => {var html = res.data})
Hello,
Thank you for your feedback. Our team is happy to hear the first approach works for you.
Concerning the generation of PDF files from the HTML string, we want to explain that it implies using another JavaScript library that would provide such a functionality.
We suggest checking out the jsPDF library. It provides a wide set of tools for generation and manipulation with PDF files. For example, it can generate a PDF from the HTML object. It means the process of the exporting would be the following:
exportTo
API call to receive the HTML string.
Please contact us in case any other questions arise.
Best regards,
Illia
Hi Illia,
I'm having some problems when exporting the report to pdf.
Please refer the parallel thread for reference:
https://www.flexmonster.com/question/export-pdf-option-not-working/
We are using custom datasource api and I have shared our report json with Maria Savrun.
Could you please use the shared data and investigate why the pdf file doesn't open in our case?
Thanks,
Tanushree
Hello, Tanushree,
Thank you for writing to us and for specifying your data source type.
We would like to confirm that our team has received the provided data and is currently working on your case.
We will make sure to reach out to you as soon as there are any updates.
Kind regards,
Vera