PDA

View Full Version : 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) (http://forums.ext.net/showthread.php?7255-Add-Ext-JavaScript-Component-to-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 (http://www.sencha.com/products/extjs3/download/). Then copy the charts.swf file from the resources folder and paste it into your asp.net project folder.

The result is shown below:

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?21353&p=92309&viewfull=1#post92309

Dimitris
Sep 03, 2013, 2:43 PM
Hi @Mimisss,

Thank you for sharing!

Here is another example.
http://forums.ext.net/showthread.php?21353&p=92309&viewfull=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
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:)))


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.
http://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
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.