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!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...