Results 1 to 9 of 9

Thread: [CLOSED] Did Charts break

  1. #1
    Premium Member
    Join Date
    Sep 2008
    Location
    Posts
    396

    [CLOSED] Did Charts break

    We had charts working in our Ext.Net 1 app (all client side of course). However, for some reason they seem to be broken now.

    In researching this I find that the charts in the Ext.Net 1 Mvc demo are also broken. (http://mvc.ext.net)

    Did something happen to break charts?
    Last edited by Daniil; Oct 05, 2012 at 6:15 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Dev Team geoffrey.mcgill's Avatar
    Join Date
    Jan 2008
    Location
    Canada
    Posts
    8,615
    We are investigating.
    Geoffrey McGill
    Ext.NET, Inc.
    Founder, and Dev Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | @extnet | Jobs

  3. #3
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,047
    Hi @randy85253,

    Please clarify do you use ExtJS 3 Charts?

    I checked, it appears to be working well with Ext.NET v1.

    I took this example
    http://dev.sencha.com/deploy/ext-3.4...rt/charts.html
    and got it working with Ext.NET v1.

    I put all required resources into the "resources" folder.

    Here is the Ext.NET example.

    Example Page
    Code:
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <link href="/resources/charts.css" rel="stylesheet" type="text/css" />
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript" src="/resources/charts.js"></script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <div id="container">
        
        </div>
    </body>
    </html>
    I took JavaScript from the ExtJS example mentioned. I just changed URLs to meet resources paths.

    Example JavaScript
    Code:
    /*!
     * Ext JS Library 3.4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    Ext.chart.Chart.CHART_URL = 'resources/charts.swf';
    
    Ext.onReady(function(){
    
        var store = new Ext.data.JsonStore({
            fields:['name', 'visits', 'views'],
            data: [
                {name:'Jul 07', visits: 245000, views: 3000000},
                {name:'Aug 07', visits: 240000, views: 3500000},
                {name:'Sep 07', visits: 355000, views: 4000000},
                {name:'Oct 07', visits: 375000, views: 4200000},
                {name:'Nov 07', visits: 490000, views: 4500000},
                {name:'Dec 07', visits: 495000, views: 5800000},
                {name:'Jan 08', visits: 520000, views: 6000000},
                {name:'Feb 08', visits: 620000, views: 7500000}
            ]
        });
    
        // extra extra simple
        new Ext.Panel({
            title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',
    
            items: {
                xtype: 'linechart',
                store: store,
                xField: 'name',
                yField: 'visits',
                listeners: {
                    itemclick: function(o){
                        var rec = store.getAt(o.index);
                        Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
                    }
                }
            }
        });
    
        // extra simple
        new Ext.Panel({
            iconCls:'chart',
            title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
            frame:true,
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',
    
            items: {
                xtype: 'linechart',
                store: store,
                url: 'resources/charts.swf',
                xField: 'name',
                yField: 'visits',
                yAxis: new Ext.chart.NumericAxis({
                    displayName: 'Visits',
                    labelRenderer : Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer : function(chart, record){
                    return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                }
            }
        });
    
        // more complex with a custom look
        new Ext.Panel({
            iconCls:'chart',
            title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
            frame:true,
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',
    
            items: {
                xtype: 'columnchart',
                store: store,
                url:'resources/charts.swf',
                xField: 'name',
                yAxis: new Ext.chart.NumericAxis({
                    displayName: 'Visits',
                    labelRenderer : Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer : function(chart, record, index, series){
                    if(series.yField == 'visits'){
                        return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                    }else{
                        return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
                    }
                },
                chartStyle: {
                    padding: 10,
                    animationEnabled: true,
                    font: {
                        name: 'Tahoma',
                        color: 0x444444,
                        size: 11
                    },
                    dataTip: {
                        padding: 5,
                        border: {
                            color: 0x99bbe8,
                            size:1
                        },
                        background: {
                            color: 0xDAE7F6,
                            alpha: .9
                        },
                        font: {
                            name: 'Tahoma',
                            color: 0x15428B,
                            size: 10,
                            bold: true
                        }
                    },
                    xAxis: {
                        color: 0x69aBc8,
                        majorTicks: {color: 0x69aBc8, length: 4},
                        minorTicks: {color: 0x69aBc8, length: 2},
                        majorGridLines: {size: 1, color: 0xeeeeee}
                    },
                    yAxis: {
                        color: 0x69aBc8,
                        majorTicks: {color: 0x69aBc8, length: 4},
                        minorTicks: {color: 0x69aBc8, length: 2},
                        majorGridLines: {size: 1, color: 0xdfe8f6}
                    }
                },
                series: [{
                    type: 'column',
                    displayName: 'Page Views',
                    yField: 'views',
                    style: {
                        image:'resources/bar.gif',
                        mode: 'stretch',
                        color:0x99BBE8
                    }
                },{
                    type:'line',
                    displayName: 'Visits',
                    yField: 'visits',
                    style: {
                        color: 0x15428B
                    }
                }]
            }
        });
    });
    Example CSS
    Code:
    #container {
        padding:10px;
    }
    #container .x-panel {
        margin:10px;
    }
    #container .x-panel-ml {
        padding-left:1px;
    }
    #container .x-panel-mr {
        padding-right:1px;
    }
    #container .x-panel-bl {
        padding-left:2px;
    }
    
    #container .x-panel-br {
        padding-right:2px;
    }
    #container .x-panel-body {
    
    }
    #container .x-panel-mc {
        padding-top:0;
    }
    #container .x-panel-bc .x-panel-footer {
        padding-bottom:2px;
    }
    #container .x-panel-nofooter .x-panel-bc {
        height:2px;
    }
    #container .x-toolbar {
        border:1px solid #99BBE8;
        border-width: 0 0 1px 0;
    }
    .chart {
        background-image: url(chart.gif) !important;
    }
    The charts.swf I took here:
    Code:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    The images chart.gif and bar.gif are here:
    Code:
    <Ext.NET v1 sources root>\ExtJS.Examples\examples\chart\chart.gif
    Code:
    <Ext.NET v1 sources root>\ExtJS.Examples\examples\chart\bar.gif
    Quote Originally Posted by randy85253 View Post
    In researching this I find that the charts in the Ext.Net 1 Mvc demo are also broken. (http://mvc.ext.net)
    I checked they works in SVN. Probably, the online version is a bit out of date. Thank you for the report. We will look into.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,047
    Here is a simple example with <ext:Panel> and <ext:Store>.

    It requires only the "charts.swf" file in the "resources" folder. As I mentioned before this file can be found here:
    Code:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    Example
    Code:
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new 
                    { 
                        name = "Jul 07",
                        visits = 245000,
                    },
                    new 
                    { 
                        name = "Aug 07",
                        visits = 240000,
                    },
                    new 
                    { 
                        name = "Sep 07",
                        visits = 355000,
                    },
                    new 
                    { 
                        name = "Oct 07",
                        visits = 375000,
                    },
                    new 
                    { 
                        name = "Nov 07",
                        visits = 490000,
                    },
                    new 
                    { 
                        name = "Dec 07",
                        visits = 495000,
                    },
                    new 
                    { 
                        name = "Jan 08",
                        visits = 520000,
                    },
                    new 
                    { 
                        name = "Feb 08",
                        visits = 620000,
                    },
                };
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onBeforeRender = function (panel) {
                panel.add({
                    xtype  : 'linechart',
                    store  : Store1,
                    url    : 'resources/charts.swf',
                    xField : 'name',
                    yField : 'visits',
                    yAxis  : new Ext.chart.NumericAxis({
                        displayName   : 'Visits',
                        labelRenderer : Ext.util.Format.numberRenderer('0,0')
                    }),
                    tipRenderer : function(chart, record){
                        return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                    }
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="name" />
                        <ext:RecordField Name="visits" Type="Int" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    
        <ext:Panel 
            ID="Panel1" 
            runat="server"
            Title="Chart" 
            Width="500" 
            Height="300">
            <Listeners>
                <BeforeRender Fn="onBeforeRender" />
            </Listeners>    
        </ext:Panel>
    </body>
    </html>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Premium Member
    Join Date
    Sep 2008
    Location
    Posts
    396
    Thanks. The trick was using a local charts.swf. Without specifying the URL it refers to one at the yahooapi site which I think is what broke.


    Quote Originally Posted by Daniil View Post
    Here is a simple example with <ext:Panel> and <ext:Store>.

    It requires only the "charts.swf" file in the "resources" folder. As I mentioned before this file can be found here:
    Code:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    Example
    Code:
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new 
                    { 
                        name = "Jul 07",
                        visits = 245000,
                    },
                    new 
                    { 
                        name = "Aug 07",
                        visits = 240000,
                    },
                    new 
                    { 
                        name = "Sep 07",
                        visits = 355000,
                    },
                    new 
                    { 
                        name = "Oct 07",
                        visits = 375000,
                    },
                    new 
                    { 
                        name = "Nov 07",
                        visits = 490000,
                    },
                    new 
                    { 
                        name = "Dec 07",
                        visits = 495000,
                    },
                    new 
                    { 
                        name = "Jan 08",
                        visits = 520000,
                    },
                    new 
                    { 
                        name = "Feb 08",
                        visits = 620000,
                    },
                };
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onBeforeRender = function (panel) {
                panel.add({
                    xtype  : 'linechart',
                    store  : Store1,
                    url    : 'resources/charts.swf',
                    xField : 'name',
                    yField : 'visits',
                    yAxis  : new Ext.chart.NumericAxis({
                        displayName   : 'Visits',
                        labelRenderer : Ext.util.Format.numberRenderer('0,0')
                    }),
                    tipRenderer : function(chart, record){
                        return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                    }
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="name" />
                        <ext:RecordField Name="visits" Type="Int" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    
        <ext:Panel 
            ID="Panel1" 
            runat="server"
            Title="Chart" 
            Width="500" 
            Height="300">
            <Listeners>
                <BeforeRender Fn="onBeforeRender" />
            </Listeners>    
        </ext:Panel>
    </body>
    </html>

  6. #6
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,047
    Finally, the example has been added to the Examples Explorer.
    http://examples1.ext.net/#/Miscellaneous/Chart/Basic/
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  7. #7
    Premium Member
    Join Date
    Jan 2012
    Location
    Toronto
    Posts
    988
    Interesting. Is the ExtJS 3 Charts package functionality comparable to the charts support provided in v2.2?
    Thanks,

    Vadym

  8. #8
    Ext.NET - Dev Team geoffrey.mcgill's Avatar
    Join Date
    Jan 2008
    Location
    Canada
    Posts
    8,615
    Quote Originally Posted by vadym.f View Post
    Interesting. Is the ExtJS 3 Charts package functionality comparable to the charts support provided in v2.2?
    There is very basic Chart support in Ext JS 3.x. Not much compared to Ext.NET 2.x (Ext JS 4.x).
    Geoffrey McGill
    Ext.NET, Inc.
    Founder, and Dev Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | @extnet | Jobs

  9. #9
    Premium Member
    Join Date
    Jan 2012
    Location
    Toronto
    Posts
    988
    Thanks for further clarification!
    Last edited by vadym.f; Sep 05, 2013 at 7:24 PM.
    Thanks,

    Vadym

Similar Threads

  1. Replies: 1
    Last Post: Apr 26, 2012, 7:20 AM
  2. Ext Js 4 / Charts
    By bentoo42 in forum Feature Requests
    Replies: 2
    Last Post: Jan 12, 2012, 4:01 PM
  3. [CLOSED] Dynamic Hyperlink adding HTML Line break after
    By rthiney in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 13, 2010, 2:09 PM
  4. How to not break the back button inside a viewport?
    By netwearcdz in forum 1.x Help
    Replies: 0
    Last Post: Oct 22, 2009, 6:58 PM
  5. [CLOSED] no line break in text area
    By Sharon in forum 1.x Premium Help
    Replies: 5
    Last Post: Aug 07, 2009, 4:53 AM

Tags for this Thread

Posting Permissions