[CLOSED] Did Charts break

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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?

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