[CLOSED] Did Charts break

  1. #1

    [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
    We are investigating.
    Geoffrey McGill
    Founder
  3. #3
    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
    <%@ 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
    /*!
     * 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
    #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:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    The images chart.gif and bar.gif are here:
    <Ext.NET v1 sources root>\ExtJS.Examples\examples\chart\chart.gif
    <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.
  4. #4
    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:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    Example
    <%@ 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>
  5. #5
    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:
    <Ext.NET v1 sources root>\Ext.Net\Build\Ext.Net\extjs\resources\charts.swf
    Example
    <%@ 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
    Finally, the example has been added to the Examples Explorer.
    https://examples1.ext.net/#/Miscellaneous/Chart/Basic/
  7. #7
    Interesting. Is the ExtJS 3 Charts package functionality comparable to the charts support provided in v2.2?
  8. #8
    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
    Founder
  9. #9
    Thanks for further clarification!
    Last edited by vadym.f; Sep 05, 2013 at 7:24 PM.

Similar Threads

  1. [CLOSED] Panel layout type seems to break when using ContentFromPage
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 26, 2012, 7:20 AM
  2. [CLOSED] Dynamic Hyperlink adding HTML Line break after
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 13, 2010, 2:09 PM
  3. 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
  4. [CLOSED] no line break in text area
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 07, 2009, 4:53 AM

Tags for this Thread

Posting Permissions