Question T12317
Visible to All Users

SurveyJS Analytics : Display plots as images

created 2 years ago (modified 2 years ago)

Hi,

First of all, thank you very much for this great tool.
To give you a bit of context before explaining my issue, I work at a university and I am developing an application that allows students to evaluate their teachings. One of the goals is to provide the teachers with a PDF file that contains the evaluation results at the end of the process. Teachers may then use this document to apply to other universities, or for their assessment interview.

I understand that this is not a top-priority feature : https://surveyjs.answerdesk.io/ticket/details/t11787.
I recall seeing a suggestion mentioning the use of HTML to PDF javascript libraries to tackle this issue; however I have tried several options and I never managed to get an acceptable result due to the plots being shifted (either on FF, or Chrome, or Safari) when generating the PDF document.

So I figured out another solution would be to download all plots as images (as images are much easier to export than svg graphics), and then "reinject" them into the HTML page. However I am reluctant to the idea of downloading ±10 image files on the user's computer before being able to create the PDF… and I can't seem to redirect them to a buffer to avoid downloading them.

So, I was wondering if there could be an option to display the plots as images instead of a Plotly graph ? I saw that such a functionality exists in the Plotly documentation : https://plotly.com/javascript/plotlyjs-function-reference/#plotlytoimage.

In my case, I imagine the scenario as follows :
The teacher displays the result page, configures each plot display settings and then clicks on "Export results to PDF".
When this happens, each plot would be converted to an image, keeping the plots display settings.
Then, I would be able generate the PDF file.

If this works, I think it might be a good workaround before having a "real" PDF export. What do you think ?

Comments (1)
Jane 2 years ago

    Hello Nicolas,
    Thank you for contacting us. I also appreciate the detailed explanation.

    Provided that PDF export is not in our short-term list, I believe you may indeed consider exporting chart to images using the dedicated API.
    We will be happy to assist you with displaying plots as images. To save the results to PDF, it will be sufficient for a teacher to print the web page using the browser built-in print functionality (Ctrl+P).

    I noted down the following inquiry and forwarded it to the team: Dashboard - Display charts as Images.

    We'll let you know once we make any progress with this task.

    Thank you

    Sign in to comment on this post

    Answers approved by surveyjs Support

    created 2 years ago (modified 2 years ago)

    Hello,

    I've created a live plunker sample for you - https://plnkr.co/edit/pwfLqdgrNYGc5dpa.
    It converts plots to images using the function you mentioned and creates a PDF document from the page HTML markup.
    It has some issues with image sizes but I believe you can overcome it by updating the PDF generation code.

    Alternatively, consider using the browser printing feature (Ctrl+P) to produce a PDF document.

    Thanks, Serge
    SurveyJS Team

      Show previous comments (1)
      Jane 2 years ago

        Hello, Nicolas,
        You're always welcome. We are happy to hear that this option worked.

        Additionally, we have another alternative solution that you might find useful: capturing a screenshot of a dashboard and adding the image to a PDF document using the jspdf library. To capture a screenshot, you can use a third-party library such as https://html2canvas.hertzen.com/.

        JavaScript
        let doc = new jsPDF();
let imgData = // produce a base64-encoded canvas element 
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
canvas.toDataURL()

        Should you have any questions or require further assistance, we are here to help.

        P.S. If you have some free time, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

        Thank you

        NA NA
        Nicolas Alexandropoulos 2 years ago

          Hello Jane,

          It's actually working perfectly now, so I guess my issue is solved !
          I left a feedback on g2.com, thank you again :)

          Cheers,
          Nicolas

          Jane 2 years ago

            Thank you, Nicolas. Please feel free to contact us if you have further questions.

            Sign in to comment on this post