Aug 13, 2012, 11:37 PM
Stacked chart with Sqldatasource doesn't load
I can get the regular bar chart or column chart to work with a sqldatasource but for some reason I cant get anything to show up for the stacked chart. What am I missing? Below is my code. The screenshot is the result. Also, I pasted in the view-source of the page after load.
---------------------------------ASPX PAGE---------------------------------------------------------
-----------------------------------------------SQL PROCEDURE-------------------------------------------
SELECT SchoolYear,FiveScore,FourScore,ThreeScore,TwoScore ,OneScore
FROM dbo.[GradeDistribution]
WHERE CourseID=@CourseID
---------------------------------ASPX PAGE---------------------------------------------------------
<%@ Page Language="C#" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Configuration"%>
<%@ 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">
<script runat="server">
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function saveChart(btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div style="margin: 5px">
<ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: #4D778B;">
<Items>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Container ID="Container1" runat="server">
<Content>
<div><b>Exam:</b> <asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True" DataSourceID="Sqldatasource2" DataTextField="CourseName"
DataValueField="CourseID" Height="20px">
</asp:DropDownList> </div>
</Content>
</ext:Container>
</Items>
</ext:Toolbar>
<ext:Panel ID="Panel1"
runat="server"
Width="800"
Height="400"
Title="Scores By Year"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
Animate="true">
<Store>
<ext:Store runat="server" ID="Store1" DataSourceID="Sqldatasource4" AutoDataBind="true">
<Model>
<ext:Model ID="Model1" IDProperty="SchoolYear" runat="server">
<Fields>
<ext:ModelField Name="SchoolYear" Mapping="SchoolYear"/>
<ext:ModelField Name="FiveScore" Mapping="FiveScore"/>
<ext:ModelField Name="FourScore" Mapping="FourScore"/>
<ext:ModelField Name="ThreeScore" Mapping="ThreeScore"/>
<ext:ModelField Name="TwoScore" Mapping="TwoScore"/>
<ext:ModelField Name="OneScore" Mapping="OneScore"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<LegendConfig Position="Right" />
<Axes>
<ext:NumericAxis
Fields="FiveScore,FourScore,ThreeScore,TwoScore,OneScore"
Position="Bottom"
Grid="true"
RoundToDecimal="false">
</ext:NumericAxis>
<ext:CategoryAxis Title="SchoolYear" Fields="SchoolYear" />
</Axes>
<Series>
<ext:BarSeries
Axis="Bottom"
Gutter="80"
XField="SchoolYear"
YField="FiveScore,FourScore,ThreeScore,TwoScore,OneScore"
Stacked="true">
</ext:BarSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:HiddenField ID="HiddenField3" runat="server" />
<asp:SqlDataSource ID="Sqldatasource2" runat="server"
ConnectionString="<%$ ConnectionStrings:CulverDBConnectionString %>"
SelectCommand="SelectCourses" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
<asp:SqlDataSource ID="Sqldatasource4" runat="server"
ConnectionString="<%$ ConnectionStrings:CulverDBConnectionString %>"
SelectCommand="GetExamScoresYear" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="CourseID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html><!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 id="Head1">
<link type="text/css" rel="stylesheet" href="/Culver/extjs/resources/css/ext-all-embedded-css/ext.axd?v=39235" />
<link type="text/css" rel="stylesheet" href="/Culver/extnet/resources/extnet-all-embedded-css/ext.axd?v=39235" />
<script type="text/javascript" src="/Culver/extjs/ext-all-js/ext.axd?v=39235"></script>
<script type="text/javascript" src="/Culver/extnet/extnet-all-js/ext.axd?v=39235"></script>
<title>
</title>
<script type="text/javascript">
function saveChart(btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
</script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ResourceManager1",aspForm:"form1",appName:"Culver"});Ext.onReady(function(){Ext.net.ResourceMgr.initAspInputs({"__LASTFOCUS":""});Ext.create("Ext.net.Viewport",{id:"Viewport1",renderTo:"form1",style:"background-color: #4D778B;",items:[{id:"Toolbar1",xtype:"toolbar",items:[{id:"Container1",xtype:"container",contentEl:"Container1_Content"}]},{id:"Panel1",height:400,width:800,items:[{id:"Chart1",xtype:"chart",axes:[{grid:true,position:"bottom",fields:["FiveScore","FourScore","ThreeScore","TwoScore","OneScore"],type:"Numeric",roundToDecimal:false},{position:"left",title:"SchoolYear",fields:["SchoolYear"],type:"Category"}],animate:true,legend:{position:"right"},series:[{xField:"SchoolYear",yField:["FiveScore","FourScore","ThreeScore","TwoScore","OneScore"],axis:"bottom",type:"bar",stacked:true,gutter:80.0}],store:{model:Ext.define("App.Model1", {extend: "Ext.data.Model", fields:[{name:"SchoolYear",mapping:"SchoolYear"},{name:"FiveScore",mapping:"FiveScore"},{name:"FourScore",mapping:"FourScore"},{name:"ThreeScore",mapping:"ThreeScore"},{name:"TwoScore",mapping:"TwoScore"},{name:"OneScore",mapping:"OneScore"}],idProperty:"SchoolYear" }),storeId:"Store1",autoLoad:true,proxy:{data:[{"SchoolYear":2006,"FiveScore":19,"FourScore":8,"ThreeScore":4,"TwoScore":0,"OneScore":0},{"SchoolYear":2009,"FiveScore":1,"FourScore":2,"ThreeScore":0,"TwoScore":1,"OneScore":0},{"SchoolYear":2012,"FiveScore":1,"FourScore":0,"ThreeScore":2,"TwoScore":3,"OneScore":0}], type: 'memory'}}}],layout:"fit",title:"Scores By Year"}]});});
//]]>
</script>
</head>
<body>
<form name="form1" method="post" action="byyear.aspx" id="form1">
<div style="margin: 5px">
<div id="Container1_Content" class="x-hidden">
<div><b>Exam:</b> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1" style="height:20px;">
<option value="100000">Art History</option>
<option value="100001">Biology</option>
<option value="100002">Calculus AB</option>
<option value="100032">Calculus AB Subgrade</option>
<option value="100003">Calculus BC</option>
<option value="100004">Chemistry</option>
<option value="100005">Chinese Language and Culture</option>
<option value="100015">Comp Government and Politics</option>
<option value="100006">Computer Science A</option>
<option value="100033">Computer Science AB</option>
<option value="100009">English Language</option>
<option value="100010">English Literature</option>
<option value="100011">Environmental Science</option>
<option value="100012">European History</option>
<option value="100013">French Language and Culture</option>
<option value="100031">French Literature</option>
<option value="100014">German Language and Culture</option>
<option value="100019">Japanese Language and Culture</option>
<option value="100020">Latin</option>
<option value="100007">Macroeconomics</option>
<option value="100008">Microeconomics</option>
<option value="100021">Music Theory</option>
<option value="100022">Physics B</option>
<option value="100023">Physics C</option>
<option value="100034">Physics C other</option>
<option value="100025">Spanish Language</option>
<option value="100026">Spanish Literature and Culture</option>
<option value="100027">Statistics</option>
<option value="100028">Studio Art</option>
<option value="100016">US Government and Politics</option>
<option value="100029">US History</option>
<option value="100030">World History</option>
</select> </div>
</div>
<input type="hidden" name="HiddenField1" id="HiddenField1" />
<input type="hidden" name="HiddenField2" id="HiddenField2" />
<input type="hidden" name="HiddenField3" id="HiddenField3" />
</div>
</form>
</body>
</html>-----------------------------------------------SQL PROCEDURE-------------------------------------------
SELECT SchoolYear,FiveScore,FourScore,ThreeScore,TwoScore ,OneScore
FROM dbo.[GradeDistribution]
WHERE CourseID=@CourseID
Last edited by collegeminer; Aug 15, 2012 at 11:03 PM.
