New Ext.NET endpoint to export Charts to images

  1. #1

    New Ext.NET endpoint to export Charts to images

    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:
    https://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/#...rty-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/#...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>
    Last edited by Daniil; Feb 28, 2014 at 5:16 AM.

Similar Threads

  1. [CLOSED] charts from code behind need to export via SvgExporter
    By Geenin in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Jan 23, 2014, 4:04 AM
  2. MVC Charts
    By Iguion in forum 2.x Help
    Replies: 1
    Last Post: Nov 28, 2012, 9:40 AM
  3. [CLOSED] Charts
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2012, 4:06 PM
  4. Replies: 1
    Last Post: Apr 19, 2010, 2:44 PM

Posting Permissions