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
Originally Posted by
randy85253
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.