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.

peamc
Explorer

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

0 Karma
Get Updates on the Splunk Community!

Splunk Answers Content Calendar, July Edition I

Hello Community! Welcome to another month of Community Content Calendar series! For the month of July, we will ...

Secure Your Future: Mastering Upgrade Readiness for Splunk 10

Spotlight: The Splunk Health Assistant Add-On  The Splunk Health Assistant Add-On is your ultimate companion ...

Observability Unlocked: Kubernetes & Cloud Monitoring with Splunk IM

Ready to master Kubernetes and cloud monitoring like the pros? Join Splunk’s Growth Engineering team on ...