How to get the SVG on the server side.?

Jan 19, 2012 at 7:11 AM

Hello guys,

I am planning to use this DotNet.Highcharts on our project. I want to know on how to get or generate the SVG on the server side. So, I could use it to covert to image. Please help me guys.

Thank you.

Coordinator
Jan 20, 2012 at 10:07 AM

Hi egenita,

Actually you can't get or generate SVG of the Highcharts until the script is not render on the client site. What is your scenario? It's possible to send the SVG on server after a button is clicked on the page.

Vangi

Jan 22, 2012 at 9:48 PM

Hi egenita,

You could look at the code linked on the Highcharts website (here [github]). It is an Asp .Net exporting module for Highcharts, to save images from the actual SVG elements.

Read more about exporting Highcharts as an image here [highcharts.com]. Highcharts also provides this feature pre-implemented, if you are willing to send your data to their servers :P For this, all you have to do is use the export module which is explained here  [highcharts.com]

Regards,

Rahul

Jan 24, 2012 at 9:35 AM

Hello Vangi,

Here's my scenario:

I have a "download" feature in my web project in which it can download all charts(26 charts) and insert them all into excel file. And send the file to the end user as response. So, that's is it..

Now, you've said that we can only get the SVG on the client side, then, my problem can't be solve...huhuhu 

Vangi, how about... Can we run/execute the JavaScipt in Sever side? O.o (Sorry for my many questions I raised..I am newbie programmer ;oD)

Or, I hope you could provide us a method like -> "chart.ToSVGString()" aside from "chart.ToHTMLString() and chart.ToString()" :-) wheew!!!

 

@testmyo,

Thanks for the reply and the link u provided but I already tried that and it doesn't solved my problem.

 

Regards,

egenita

Jan 24, 2012 at 8:55 PM

egenita,

What you're trying to do is very difficult.  I have been using SVG/VML libraries (i.e. http://raphaeljs.com/) for sometime and they can be tricky to get a raster image, let alone 26 at once.

First you got to understand that HighCharts doesn't strictly use SVG.  HighCharts uses VML in IE7/IE8 and SVG in all other browsers.  So you can only get the SVG in non-IE (except IE9) browsers.  If your site doesn't allow IE7/IE8 browsers then this won't be an issue, but if your site is open to all browser then this will be a nightmare.  I have never rasterized VML into a image, but I'm sure it's not fun.

So if you are limiting your traffic to non-IE traffic then yes you can grab the SVG, rasterize it, save it, then place it in an excel file.  However this will be a big under taking and will be really resource intensive. But I will briefly explain how I got it to work.

First you would need to grab the SVG on the client-side and send it to a back end script. I used jQuery to grab the SVG and send it to the back end:

function getSVG() {
        var svg = $('#chart_container > div').html();
        $.ajax({
            type: "POST",
            url: "Default.aspx/saveSVG",
            data: "{'svg':'" + svg + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                  alert(response.d);
            }
        });
    }

Then the back end script (in this example it's called "saveSVG" - written in VB.NET) will save the string as a temporary svg, then call a program such as InkScape or Batik ImageMagik to rasterize the file as a .png or .jpg via a command line call:

Imports System.Diagnostics
 
<WebMethod(EnableSession:=True)> _
    Shared Function saveSVG(ByVal svg As String) As String
        Dim result As String = "Success"
        Dim pathToSave As String = "Your path"
        Try
            Dim fs As New FileStream(pathToSave & "temp.svg", FileMode.Create, FileAccess.Write)
            Dim s As New StreamWriter(fs)
            s.WriteLine(svg)
            s.Close()
            fs.Close()

            Dim objProcess As System.Diagnostics.Process
            objProcess = New System.Diagnostics.Process()
            objProcess.StartInfo.Arguments = "-f " & pathToSave & "temp.svg" & " -e " & pathToSave & "temp.png"
            objProcess.StartInfo.FileName = "C:\Program Files\Inkscape\inkscape.exe"
            objProcess.StartInfo.WindowStyle = ProcessWindowStyle.Normal
            objProcess.Start()
            'Wait until it's finished
            objProcess.WaitForExit()
            'Exitcode as String
            Console.WriteLine(objProcess.ExitCode.ToString())
            objProcess.Close()


        Catch ex As Exception
            result = ex.Message
        End Try

        Return result
    End Function

Then you can grab your "temp.png" and insert it into your excel document.  Now you will have to install InkScape or ImageMagik installed on your server and read the documentation of that program to make sure you are using the command line arguments correctly.

This code is very rough but it gives you some what of an idea of how it could work.  But again.... this is a LOT of work, especially for 26 images.  The export solution that testmyo posted I think by far is the best and easiest solution.  So you might be better off reworking you site so the clients could just download each chart 1 by 1 using that export option because it is a lot easy to implement and maintain.  And it works in IE also.

Good luck!

zgood

Coordinator
Jan 28, 2012 at 6:41 AM

Hello egenita,

There is no way to execute JavaScript on server side (let me know if I'm wrong). Otherwise you can use Microsoft Chart Controls for Microsoft .NET Framework 3.5 to build the chart on server side as image.

Vangi