High-chart Div save as image and save file in server path

Question

Hi I have a highchart want to save it as server image path

 <div id="container" class="container"></div>

 var options = {
            chart: {},
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ]
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                type: 'column'
            }]
        }

        var chart = Highcharts.chart('container', options)

        var data = {
            type: 'POST',
            options: JSON.stringify(options),
            filename: 'test.png',
            type: 'image/png',
            async: true
        };
        var exportUrl = 'https://export.highcharts.com/'
        $.post(exportUrl, data, function (data) {
            var imageUrl = exportUrl + data          
            var urlCreator = window.URL || window.webkitURL
           document.querySelector("#image1").src = imageUrl
            
        })

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<h2>
Exported image below
</h2>
<img id="image1"/>

I am able to export the image to html,but how can i save this image in a server path the exported image is displaying in an html (Image1) image control

Hi @user2513019, You can get svg string from the chart: http://jsfiddle.net/BlackLabel/g4fczkh8/ and process it in the way you want. — ppotaczek, Jun 18 '20 at 09:42
Hi Thank you for your response,if you don't mind can you explain more, how can i get the string and how i can save in my server folder — user2513019, Jun 21 '20 at 09:30
Unfortunately I am not a backend expert. In the example I used `getSVG` method to get the string. I think that you need to send it somehow to backend and save it to a file. Maybe this will help: https://stackoverflow.com/questions/1053467/how-do-i-save-a-string-to-a-text-file-using-java — ppotaczek, Jun 22 '20 at 16:10
Thank you, I have tried this, but not able to save in server folder — user2513019, Jun 23 '20 at 04:19

user2513019 · Answer 1 · 2020-07-01T05:26:55.610

Finally I have done it myself.

here is the code

Here the javascript after creating the chart..

 var data = {
            type: 'POST',
            options: JSON.stringify(options),
            filename: 'test.png',
            type: 'image/png',
            async: true
        };
        var exportUrl = 'https://export.highcharts.com/'
        $.post(exportUrl, data, function (data) {
            var imageUrl = exportUrl + data          
            var urlCreator = window.URL || window.webkitURL
       
            document.getElementById('<%= hf2.ClientID %>').value=imageUrl;
        })

Now the backend code to receive the imageurl and save as byte My code is in Vb.net

 saveimage(hf1.Value, _Fname)

where fname is the filename,i want to generate filename dynamically.so i have another function for that

Public Sub saveimage(ByVal _url As String, ByVal _filename As String)           
        _filename = Server.MapPath(".") + "\Charts\" & _filename
        save_file_from_url( _filename, _url)
    End Sub




Public Sub save_file_from_url(ByVal file_name As String, ByVal url As String)
        Dim content As Byte()
        Dim request As HttpWebRequest = CType(WebRequest.Create(url), HttpWebRequest)
        Dim response As WebResponse = request.GetResponse()
        Dim stream As Stream = response.GetResponseStream()
        Using br As BinaryReader = New BinaryReader(stream)
            content = br.ReadBytes(500000)
            br.Close()
        End Using
        response.Close()
        Dim fs As FileStream = New FileStream(file_name, FileMode.Create)
        Dim bw As BinaryWriter = New BinaryWriter(fs)
        Try
            bw.Write(content)
        Finally
            fs.Close()
            bw.Close()
        End Try
    End Sub

This is very easy and simple,but lot of sample codes i saw in the net is very complicated and not practical.

High-chart Div save as image and save file in server path

1 Answers1