PDA

View Full Version : New Ext.NET endpoint to export Charts to images



Daniil
Feb 28, 2014, 5:08 AM
Hello everybody,

You all should know a possibility to export Ext.NET Charts to images. If someone doesn't know, you can review it here:
http://examples2.ext.net/#/Chart/Area/Basic/

Just click the "Save Chart" button.

This functionality came from ExtJS, but actual converting of a Chart to an image is being done on a server, because there is no possibility to do it on a client. The default endpoint for that is "http://svg.sencha.io".
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.draw.engine.ImageExporter-property-defaultUrl

Sometimes this default endpoint is down and it led us to have our own endpoint, as an alternative of the default one. So, we started such a project. The related Issue is:
https://github.com/extnet/Ext.NET/issues/414

Currently, we made our endpoint working:
http://svg.ext.net/

It is easy to configure your application to use it, by this JavaScript code:

Ext.draw.engine.ImageExporter.defaultUrl = "http://svg.ext.net";

Though, in the future there will be a setting for that in a ResourceManager and Web.config.

At minimum our initial goal is to repeat the existing funcitonality of Sencha's endpoint. In the future we or you might want to extend the functionality. So, we encourage you to report to us any feature requests regarding that. And, certainly, bug reports if any. You can do it in the current thread.

You can organize your own endpoint if needed, using this project:
https://github.com/extnet/Ext.NET.SVG

By the way, it appears that the Sencha's endpoint cannot export to jpeg regardless that it is stated as supported.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.draw.engine.ImageExporter-property-supportedTypes

It just returns a png file even if specify "image/jpeg". But our endpoint does support exporting to jpeg.

Here is a small example to test with.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store s = this.Chart1.GetStore();
s.DataSource = new object[]
{
new
{
x = 0,
y = 0
},
new
{
x = 50,
y = 50
},
new
{
x = 100,
y = 100
}
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Chart Export Example</title>

<script>
// In the future there will be a setting for that in a ResourceManager and a Web.config
Ext.draw.engine.ImageExporter.defaultUrl = "http://svg.ext.net";

var saveChart = function (type) {
App.Chart1.save({
type: type
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button
runat="server"
Text="Save As Jpeg"
Handler="saveChart('image/jpeg');" />

<ext:Button
runat="server"
Text="Save As Png"
Handler="saveChart('image/png');" />

<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Store>
<ext:Store
runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="y" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="y"
Title="Y"
Minimum="0" />

<ext:NumericAxis
Position="Bottom"
Fields="x"
Title="X" />
</Axes>
<Series>
<ext:LineSeries
Axis="Left"
XField="x"
YField="y" />
</Series>
</ext:Chart>
</form>
</body>
</html>