PDA

View Full Version : [CLOSED] Using SVG library for saving chart images



cwolcott
Nov 21, 2013, 1:58 PM
Glad that the thread below was posted and that you gave an example.

Thread #1 - Exporting 2 Charts into Single png (http://forums.ext.net/showthread.php?27293-CLOSED-Exporting-2-Charts-into-Single-png)

It provided a work around to an issue that I have had for several months.

Thread #2 - Using SVG [Post #7 an beyond] (http://forums.ext.net/showthread.php?25590-CLOSED-Using-SVG&p=112999&viewfull=1#post112999)

The issue is the background image of the Ext.NET chart is not being captured and thus when using the SVG library the background is grey. If you add the following button and method to the thread #1 example you will see what I mean.



...
[DirectMethod]
public void SaveSvgChart1Only(string svg1) {
XmlDocument xd = new XmlDocument();
xd.XmlResolver = null;
xd.LoadXml(Server.HtmlDecode(svg1));
var svgGraph = Svg.SvgDocument.Open(xd);
svgGraph.Draw().Save(@"c:\\testChar1Only.png", System.Drawing.Imaging.ImageFormat.Png);
}
...
<ext:Button
runat="server"
Text="Save SVG Chart #1"
Handler="var svg1 = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generat e(#{Chart1}.surface)); #{DirectMethods}.SaveSvgChart1Only(svg1);" />


So for a work around I perform the same steps you did in the example for saving just one chart and clear the canvas to white.

If in your example Chart #1 had
StyleSpec="background: yellow;" how would you save the chart via SVG so that it looked the same as what is on the screen?

Baidaly
Nov 21, 2013, 6:19 PM
Hello!

You should use Background property because when you use StyleSpec it doesn't go to SVG, it stays only in browser:


<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Background Fill="#FFFF00" />

cwolcott
Nov 21, 2013, 6:26 PM
Very cool. To many attributes everywhere. I think I have graduated to 8th grade in understanding things, and you throw me back to 3rd grade.

Please close the thread.

Baidaly
Nov 21, 2013, 6:34 PM
I have the same feelings sometimes when I'm talking with Daniil :)

Daniil
Nov 22, 2013, 2:45 AM
I always have the same feelings talking to Vladimir:)))

cwolcott
Nov 22, 2013, 9:57 AM
Based on the comment above about StyleSpec attribute vs the Background property would you want to change several of the chart examples from using StyleSpec to Background?

You do have the 'Save Image' button that produces a PNG for the chart and the background is not white because of using the SytleSpec.

Chart -> Area -> Basic (http://examples2.ext.net/#/Chart/Area/Basic/)
Chart -> Area -> Browser_Stats (http://examples2.ext.net/#/Chart/Area/Browser_Stats/)
Chart -> Bar -> Grouped (http://examples2.ext.net/#/Chart/Bar/Grouped/)
Chart -> Bar -> Mixed (http://examples2.ext.net/#/Chart/Bar/Mixed/)
Chart -> Bar -> Renderer (http://examples2.ext.net/#/Chart/Bar/Renderer/)

Plus many others ...

Daniil
Nov 26, 2013, 12:42 PM
Thank you for that catch. But... let's imagine it was done intentionally, i.e. a user doesn't need that background to go with a chart on saving;)

cwolcott
Nov 26, 2013, 12:53 PM
That is fine. The reason I had an issue was as a newbie to Ext.NET I looked at the examples and used StyleSpec to color my chart backgrounds (Like the example) and didn't look further for an additional property in Chart. Thus when I went to use SVG I didn't understand why the background was not being picked up by SVG.

Obviously the error was mine for not using <Background Fill="white">, but in your examples you were using StyleSpec and had a button to "Save Image" so I thought I was good.

Not a problem. It is just what I experienced 6 months ago when I was integrating SVG into my charts.

Daniil
Nov 26, 2013, 1:02 PM
Fair enough. Sorry that our examples misled you in that case.

Baidaly
Nov 26, 2013, 1:25 PM
I'm agree with @Daniil, but we will add new samples with SVG where we will take into account your note about background.

Baidaly
Nov 26, 2013, 10:09 PM
We added new Chart samples with SVG to SVN. We'd like to hear what you think on that.

cwolcott
Dec 01, 2013, 4:47 PM
I see the two new examples in the trunk under Chart -> Miscellaneous.

I have a question on how do you reference Svg in Markup only?

The two examples error out with 'CS0103: The name 'Svg' does not exist in the current context' at:


var svgGraph = Svg.SvgDocument.Open(xd);

FOLLOWUP: I have rebuilt the Ext.Net Examples project and everything runs fine.

Why can't my code see Svg when in Markup only. It works just fine in behind code when I have
using Svg;

FOLLOWUP #2: Everything works. I did not have the Svg library in my sample project. I guess my brain doesn't work on the weekends.

Baidaly
Dec 01, 2013, 7:17 PM
Thank you for your feedback!