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 Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...