Splunk Search

How do I export a chart as a high-quality image?

peamc
Explorer

Struggling a bit to find an answer to this.

Can anyone suggest a way to create a sharp, high-quality image export from my charts?

At this point I've converted my SimpleXML dashboard into HTML and tried to convert my div/chart SVG into a PNG file. This was partially successful but the quality of the exported image was awful.

Any help much would be much appreciated.

Tags (4)
1 Solution

chumberr
Engager

Hi there @peamc, yes there is a way to do this using HTML2Canvas:

    <script src="https://rawgithub.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
    <script type="text/javascript">


        function exportChart() {

            html2canvas($('#element1'), {
                useCORS: true,
                allowTaint: true,
                  onrendered: function (canvas) {
                    var img = document.createElement("a");

                    img.href = canvas.toDataURL();
                    img.download = "chart.png";
                    img.click();

                      }
                  });
              } 
</script>

Heres a function which does what you need, just replace 'element1' with the div id of you div containing your chart!
Good luck mate.

View solution in original post

chumberr
Engager

Hi there @peamc, yes there is a way to do this using HTML2Canvas:

    <script src="https://rawgithub.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
    <script type="text/javascript">


        function exportChart() {

            html2canvas($('#element1'), {
                useCORS: true,
                allowTaint: true,
                  onrendered: function (canvas) {
                    var img = document.createElement("a");

                    img.href = canvas.toDataURL();
                    img.download = "chart.png";
                    img.click();

                      }
                  });
              } 
</script>

Heres a function which does what you need, just replace 'element1' with the div id of you div containing your chart!
Good luck mate.

View solution in original post

peamc
Explorer

Oh wow ! This is exactly what I was after !! Cheers @chumberr

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!