ExtJS Charts in Ext.Net version 1.x

**Dimitris** · Sep 01, 2013, 9:51 PM

Hi,

With all due respect to Ext.Net version 2.x I've always been wondering if ExtJS charts could work with Ext.Net version 1.x even though the official Ext.Net package does not support them.

Well, it actually can! Based on geoffrey's post (on how to add ExtJS component to Ext.Net component) here is how to add a Ext.chart.PieChart component inside a Ext.Net Panel.

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

<%@ 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 1.x and ExtJS Charts!</title>
     
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />

    <script type="text/javascript">
        Ext.chart.Chart.CHART_URL = 'charts.swf';

        var addPanel = function (pnl) {
            var store = new Ext.data.JsonStore({
                fields: ['season', 'total'],
                data: [{
                    season: 'Summer',
                    total: 150
                }, {
                    season: 'Fall',
                    total: 245
                }, {
                    season: 'Winter',
                    total: 117
                }, {
                    season: 'Spring',
                    total: 184
                }]
            });

            var pie = new Ext.chart.PieChart({
                store: store,
                dataField: 'total',
                categoryField: 'season',
                extraStyle:
                {
                    legend:
                    {
                        display: 'bottom',
                        padding: 5,
                        font:
                        {
                            family: 'Tahoma',
                            size: 13
                        }
                    }
                }
            });

            pnl.add(pie);
            pnl.doLayout();
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" />

    <h1>ExtJS charts and Ext.Net 1.x!</h1>

    <ext:Panel
        ID="Panel1"
        runat="server"
        width="400"
        height="400"
        title="PieChart">
        <Listeners>
            <BeforeRender Fn="addPanel" />
        </Listeners> 
    </ext:Panel>
    </form>
</body>
</html>

IMPORTANT: For this to work you need the charts.swf file provided by ExtJS in the freely available ExtJS 3.x SDK. FYI, ExtJS 3.x supports chart in the form of flash objects. You can download the ExtJS 3.4 here. Then copy the charts.swf file from the resources folder and paste it into your asp.net project folder.

The result is shown below:

Click image for larger version.

Name: pie.PNG
Views: 36
Size: 9.6 KB
ID: 6830

Hope this helps everyone who needs charts but cannot afford migrating to ext.net version 2.x :)

**Daniil** · Sep 03, 2013, 11:19 AM

Hi @Mimisss,

Thank you for sharing!

Here is another example.
http://forums.ext.net/showthread.php...ll=1#post92309

**Dimitris** · Sep 03, 2013, 2:43 PM

Originally Posted by Daniil

Hi @Mimisss,

Thank you for sharing!

Here is another example.
http://forums.ext.net/showthread.php...ll=1#post92309

Haha, nice. As much as I searched I'd never thought to use "charts v1" as tag :)

Maybe, it is a good idea to add such a sample in your version 1.7 examples explorer.

**Daniil** · Sep 03, 2013, 3:03 PM

Originally Posted by Mimisss

Haha, nice. As much as I searched I'd never thought to use "charts v1" as tag :)

Oh, I got some hard time searching for that example and just added that tag:)))

Originally Posted by Mimisss

Maybe, it is a good idea to add such a sample in your version 1.7 examples explorer.

Thank you for the suggestion.

**Daniil** · Sep 05, 2013, 6:21 AM

Done, the example has been added to the Examples Explorer.
https://examples1.ext.net/#/Miscellaneous/Chart/Basic/

**Dimitris** · Sep 05, 2013, 11:07 AM

Excellent!

Here is another example featuring a Store and a MasterPage. I've had a hard time accessing the Store inside a MasterPage but usage of Static IDMode and BeforeRender Handler (instead of Fn) did the job.

MasterPage:

<%@ Master Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.MasterPage" %>

<%@ 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></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Web Form:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" %>

<script runat="server">
    protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        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>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        Ext.chart.Chart.CHART_URL = 'charts.swf';

        var addPanel = function (pnl, store) {
            var pie = new Ext.chart.PieChart({
                store: store,
                dataField: 'visits',
                categoryField: 'name',
                series: [{
                    style: {
                        showLabels: true
                    }
                }],
                extraStyle:
                {
                    animationEnabled: true,
                    legend:
                    {
                        display: 'bottom',
                        padding: 5,
                        font:
                        {
                            family: 'Tahoma',
                            size: 13
                        }
                    }
                }
            });
            pnl.add(pie);
            pnl.doLayout();
        };
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <ext:Store
        ID="Store1"
        IDMode="Static"
        runat="server"
        AutoLoad="true"
        OnRefreshData="Store1_RefreshData">
        <Proxy>
            <ext:PageProxy />
        </Proxy>
        <Reader>
            <ext:JsonReader>
                <Fields>               
                    <ext:RecordField Name="name" />
                    <ext:RecordField Name="visits" Type="Int" />
                </Fields>
            </ext:JsonReader>
        </Reader>    
    </ext:Store>

    <ext:Panel
        ID="pnl"
        IDMode="Static"
        runat="server"
        AutoWidth="true"
        height="400"
        title="Pie Chart">
        <Listeners>
            <BeforeRender Handler="addPanel(pnl, Store1);" />
        </Listeners>
    </ext:Panel>
</asp:Content>

Maybe this can be presented as an "Advanced" or "Remote Data" example.

**Daniil** · Sep 06, 2013, 12:08 PM

Originally Posted by Mimisss

Maybe this can be presented as an "Advanced" or "Remote Data" example.

Thank you for the suggestion. I think the only example is enough for now. Just to demonstrate it is possible. However, I will bear your suggestion in mind.

Thread: ExtJS Charts in Ext.Net version 1.x

Thread Tools

Search Thread

Display

ExtJS Charts in Ext.Net version 1.x

Similar Threads

extjs version for ext.net 2.x

Wow.. extjs Charts

[CLOSED] Extjs Charts and Group By Question

[CLOSED] Using ExtJS 4 charts with Ext.Net

Using ExtJS 4 charts with Ext.Net (coolite)

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: ExtJS Charts in Ext.Net version 1.x

ExtJS Charts in Ext.Net version 1.x

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us