[CLOSED] export chart to SVG

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] export chart to SVG

    Hi

    It seems that the EXT.JS library has now included options to export the charting graphs to SVG. Is it possible to add that to EXT.NET to support that soon? If not, is there alternative way to get the bitmap out of a chart? Thank you so much

    Chris
    Last edited by Daniil; May 09, 2012 at 9:24 AM. Reason: [CLOSED]
  2. #2
    You can use any ExtJS code under Ext.Net
    How do you export chart to SVG?

    To get SVG you can use the following javascript code
    Ext.draw.engine.SvgExporter.self.generate(null, MyChartInstance.surface)
    Resulted svg string can be passed to the server as required (parameter of direct/ajax request or as hidden field with form submitting)
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Also, you can export a chart to image (please note that Sencha.IO is used for that)
    See
    http://examples2.ext.net/#/Chart/Area/Basic/
    Vladimir Shcheglov
    Sr. Developer
  4. #4
    Thank you so much for your super quick reply, I really appreciate that. I should have noticed someone asked a similar question last month. Sorry for the duplicated effort that I caused you...
  5. #5
    No problem, don't hesitate to ask any questions
    Vladimir Shcheglov
    Sr. Developer
  6. #6
    Quote Originally Posted by Vladimir View Post
    Also, you can export a chart to image (please note that Sencha.IO is used for that)
    See
    http://examples2.ext.net/#/Chart/Area/Basic/
    Hello

    I'm very interested in such a functionnality, please could you explain the interaction with sencha.io, I did not know this tool. Is it as server one, because I see nothing in the example code.
  7. #7
    This is what I've done on the client side, to listen to the AfterRender event, wait for 2.5 second and submit the SVG code back to the server.

      <ext:Chart ID="chtFPABar" runat="server" Shadow="true" StyleSpec="background:#fff" Animate="true"
                Flex="1" Theme="Fancy" >
                <Listeners>
                    <AfterRender Handler="setTimeout(function(){ #{DirectMethods}.SaveCharts('FPABar',Ext.draw.engine.SvgExporter.self.generate(null, #{chtFPABar}.surface));}, 2500)"></AfterRender>          
                </Listeners>
    .....
    Then in the server side direct method I used the project from svg.codeplex.com to render it in the server space in a bitmap form. Just a word on svg.codeplex.com, it hasn't been updated for quite sometime and there are a few problems, I've got to dig into the source code to do some quick and dirty patch to get exactly what I wanted....people are submitting patches there but haven't an official release recently.
  8. #8
    Quote Originally Posted by CarpFisher View Post
    This is what I've done on the client side, to listen to the AfterRender event, wait for 2.5 second and submit the SVG code back to the server.

      <ext:Chart ID="chtFPABar" runat="server" Shadow="true" StyleSpec="background:#fff" Animate="true"
                Flex="1" Theme="Fancy" >
                <Listeners>
                    <AfterRender Handler="setTimeout(function(){ #{DirectMethods}.SaveCharts('FPABar',Ext.draw.engine.SvgExporter.self.generate(null, #{chtFPABar}.surface));}, 2500)"></AfterRender>          
                </Listeners>
    .....
    Then in the server side direct method I used the project from svg.codeplex.com to render it in the server space in a bitmap form. Just a word on svg.codeplex.com, it hasn't been updated for quite sometime and there are a few problems, I've got to dig into the source code to do some quick and dirty patch to get exactly what I wanted....people are submitting patches there but haven't an official release recently.
    Thanks a lot. could you please share the code behind function too? I'm on another problem now, and will dig into that later.
  9. #9
    Quote Originally Posted by feanor91 View Post
    Thanks a lot. could you please share the code behind function too? I'm on another problem now, and will dig into that later.
    I store the chart in SVG form directly in the database and didn't change it to bitmap until I really need to use it. But if I have to do it I would do it like below: (remember u need to reference to that SVG library from codeplex

    
      private void SavePNG(Stream SaveStream, string SVGDoc){
    
                XmlDocument xd = new XmlDocument();
                xd.XmlResolver = null;
                xd.LoadXml(SVGDoc);
                var svgGraph = Svg.SvgDocument.Open(xd);
    
                svgGraph.Draw().Save(SaveStream, System.Drawing.Imaging.ImageFormat.Png);
              
            }
    
    [DirectMethod(ViewStateMode = Ext.Net.ViewStateMode.Enabled)]
            public void SaveCharts(string chartName, string chartSVG )
            {
      MemoryStream ms = new MemoryStream();
     SVGUtil.SavePNG(ms, chartSVG );
    
    //ms now contains the bitmap in PNG form of the chartSVG.... do whatever you need to do there, either save it to file or store in database etc
    
    }
  10. #10
    Many many thanks, you extract a thorn from my foot with that code.

    One of the main function of my next application version.

    I will adapt it to my need when my dynamic charts will be functionning.
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] Export Chart as Image
    By jchau in forum 2.x Premium Help
    Replies: 7
    Last Post: Feb 28, 2014, 5:14 AM
  2. [CLOSED] How to Export SVG chart from code behind
    By feanor91 in forum 2.x Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  3. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  4. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. Replies: 1
    Last Post: Apr 19, 2010, 2:44 PM

Tags for this Thread

Posting Permissions