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
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!