Jan 17, 2014, 4:41 PM
multiaxis chart not showing up after hiding and attempting to redraw
Presently, I have a chart with three tabs and a web page with two sets of dropdowns. Two of the charts are simple line charts, and the third chart is a multi-axis line chart. If values are selected for both sets of dropdowns associated with "Technical Driver #1" and "Technical Driver #1" then I want all three charts to be drawn. If the user only selects values either "Technical Driver #1" or "Technical Driver #2" then I want only one line chart to be drawn and the other two charts to be hidden. Now when I try to redraw the charts, the two line charts are drawn correctly; however, the multi-axis chart is not redrawn. Please see the following screen shots for details:
Here is the ASPX code for all three charts:
Here is the ASPX code for all three charts:
<ext:TabPanel ID="TabPanel1" runat="server" Width="1000" Height="600" Margins="0 0 20 0"
Frame="true">
<Defaults>
<ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
<ext:Panel ID="pnlChart3" runat="server" Title="Technical Driver #1 & #2" Width="800"
Height="280" Layout="FitLayout">
<%--
<TopBar>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:Button ID="Button5" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData3" />
<ext:Button ID="Button6" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
</Items>
</ext:Toolbar>
</TopBar>
--%>
<Items>
<ext:Chart ID="Chart3" runat="server" StyleSpec="background:#fff;" Shadow="true"
StandardTheme="Category1" Animate="true">
<Store>
<ext:Store ID="Store3" runat="server">
<Model>
<ext:Model ID="Model4" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Normal" />
<ext:ModelField Name="Optimistic" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Year" />
<ext:NumericAxis Title="Data (blue)" Fields="Normal" Position="Left" Minimum="0">
<LabelTitle Fill="#115fa6" />
<Label Fill="#115fa6" />
</ext:NumericAxis>
<ext:NumericAxis Title="Data (green)" Fields="Optimistic" Position="Right" Minimum="0">
<LabelTitle Fill="#94ae0a" />
<Label Fill="#94ae0a" />
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Titles="Blue Line" XField="Name" YField="Normal" Axis="Left" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
<ext:LineSeries Titles="Green Line" XField="Name" YField="Optimistic" Axis="Right"
Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker ID="VerticalMarker1" runat="server">
<XLabelRenderer Handler="return Ext.util.Format.date(value + 1, 'y');" />
</ext:VerticalMarker>
</Plugins>
<LegendConfig Position="Bottom" />
</ext:Chart>
</Items>
</ext:Panel>
<ext:Panel ID="pnlChart1" runat="server" Title="Technical Driver #1" Width="800"
Height="280" Layout="FitLayout">
<%--
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
<ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
</Items>
</ext:Toolbar>
</TopBar>
--%>
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Shadow="true"
StandardTheme="Category1" Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store1" runat="server" Data="<%# LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond.SelectedItem.Value), Convert.ToInt32(ddlFieldCond.SelectedItem.Value), Convert.ToInt32(ddlProjectCond.SelectedItem.Value)) %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Normal" />
<ext:ModelField Name="Optimistic" />
<ext:ModelField Name="Pessimistic" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Fields="Normal,Optimistic,Pessimistic" Title="Number of Hits" MinorTickSteps="1"
Minimum="0">
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Year" />
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Name" YField="Normal">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" Smooth="3" XField="Name" YField="Optimistic">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" Smooth="3" Fill="true" XField="Name" YField="Pessimistic">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker ID="VerticalMarker2" runat="server">
<XLabelRenderer Handler="return Ext.util.Format.date(value + 1, 'Y');" />
</ext:VerticalMarker>
</Plugins>
</ext:Chart>
</Items>
</ext:Panel>
<ext:Panel ID="pnlChart2" runat="server" Title="Technical Driver #2" Width="800"
Height="280" Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="Toolbar4" runat="server">
<%--
<Items>
<ext:Button ID="Button3" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData2" />
<ext:Button ID="Button4" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
</Items>
--%>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;" Shadow="true"
StandardTheme="Category1" Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store2" runat="server" Data="<%# LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond2.SelectedItem.Value), Convert.ToInt32(ddlFieldCond2.SelectedItem.Value), Convert.ToInt32(ddlProjectCond2.SelectedItem.Value)) %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Normal" />
<ext:ModelField Name="Optimistic" />
<ext:ModelField Name="Pessimistic" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Fields="Normal,Optimistic,Pessimistic" Title="Number of Units" MinorTickSteps="1"
Minimum="0">
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Year" />
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Name" YField="Normal">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" Smooth="3" XField="Name" YField="Optimistic">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" Smooth="3" Fill="true" XField="Name" YField="Pessimistic">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker ID="VerticalMarker3" runat="server">
<XLabelRenderer Handler="return Ext.util.Format.date(value + 1, 'Y');" />
</ext:VerticalMarker>
</Plugins>
</ext:Chart>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel> private void ChangeChartLabel()
{
this.pnlChart1.Visible = false;
this.pnlChart2.Visible = false;
this.pnlChart3.Visible = false;
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond.SelectedItem.Text))
{
// Chart has 1 numeric axis and 1 category axis, but don't know which order they are in
this.pnlChart1.Visible = true;
this.pnlChart1.Title = ddlTechnicalDriverCond.SelectedItem.Text;
for (int i = 0; i < Chart1.Axes.Count; i++)
{
var axisA = Chart1.Axes[i];
if (axisA is NumericAxis)
{
NumericAxis axis = Chart1.Axes[i] as NumericAxis;
axis.Title = strTechnicalDriver1Unit;
this.Chart1.Axes.RemoveAt(i);
this.Chart1.Axes.Add(axis);
}
}
this.pnlChart1.Render();
}
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond2.SelectedItem.Text))
{
// Chart has 1 numeric axis and 1 category axis, but don't know which order they are in
this.pnlChart2.Visible = true;
this.pnlChart2.Title = ddlTechnicalDriverCond2.SelectedItem.Text;
for (int i = 0; i < Chart2.Axes.Count; i++)
{
var axisB = Chart2.Axes[i];
if (axisB is NumericAxis)
{
NumericAxis axis = Chart2.Axes[i] as NumericAxis;
axis.Title = strTechnicalDriver2Unit;
this.Chart2.Axes.RemoveAt(i);
this.Chart2.Axes.Add(axis);
}
}
this.pnlChart2.Render();
}
// Change labels in Chart3 3 axes
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond.SelectedItem.Text) && !String.IsNullOrEmpty(ddlTechnicalDriverCond2.SelectedItem.Text))
{
this.pnlChart3.Visible = true;
this.pnlChart3.Title = ddlTechnicalDriverCond.SelectedItem.Text + " vs. " + ddlTechnicalDriverCond2.SelectedItem.Text;
NumericAxis axis1 = this.Chart3.Axes[1] as NumericAxis;
NumericAxis axis2 = this.Chart3.Axes[2] as NumericAxis;
axis1.Title = strTechnicalDriver1Unit;
axis2.Title = strTechnicalDriver2Unit;
this.Chart3.Axes.RemoveAt(1);
this.Chart3.Axes.RemoveAt(1);
this.Chart3.Axes.Add(axis1);
this.Chart3.Axes.Add(axis2);
var lineSeries1 = this.Chart3.Series[0];
var lineSeries2 = this.Chart3.Series[1];
lineSeries1.Titles[0] = ddlTechnicalDriverCond.SelectedItem.Text + " (Normal Scenario)";
lineSeries2.Titles[0] = ddlTechnicalDriverCond2.SelectedItem.Text + " (Normal Scenario)";
this.Chart3.Series.RemoveAt(0);
this.Chart3.Series.RemoveAt(0);
this.Chart3.Series.Add(lineSeries1);
this.Chart3.Series.Add(lineSeries2);
this.pnlChart3.Render();
}
}
protected void ReloadData(object sender, DirectEventArgs e)
{
Store store = this.Chart1.GetStore();
store.DataSource = LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond.SelectedItem.Value), Convert.ToInt32(ddlFieldCond.SelectedItem.Value), Convert.ToInt32(ddlProjectCond.SelectedItem.Value));
store.DataBind();
this.ChangeChartLabel();
this.Chart1.ReRender();
}
protected void ReloadData2(object sender, DirectEventArgs e)
{
Store store = this.Chart2.GetStore();
store.DataSource = LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond2.SelectedItem.Value), Convert.ToInt32(ddlFieldCond2.SelectedItem.Value), Convert.ToInt32(ddlProjectCond2.SelectedItem.Value));
store.DataBind();
this.ChangeChartLabel();
this.Chart2.ReRender();
}
protected void ReloadData3(object sender, DirectEventArgs e)
{
Store store = this.Chart3.GetStore();
store.DataSource = LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond.SelectedItem.Value), Convert.ToInt32(ddlFieldCond.SelectedItem.Value), Convert.ToInt32(ddlProjectCond.SelectedItem.Value));
store.DataBind();
this.ChangeChartLabel();
this.Chart3.ReRender();
}
public static List<LineChartData> GenerateData(int _IdTechnicalDriver, int _IdField, int _IdProject)
{
DataClass.clsTechnicalDriverData oTechnicalDriver1 = new DataClass.clsTechnicalDriverData();
DataTable dt = oTechnicalDriver1.LoadList("IdProject = '" + _IdProject + "' AND IdField = '" + _IdField + "' AND IdTechnicalDriver = '" + _IdTechnicalDriver + "'", "");
List<LineChartData> data = new List<LineChartData>(dt.Rows.Count);
Int32 intYear = DateTime.Now.Year;
foreach (DataRow objRow in dt.Rows)
{
string strDriver1Baseline = objRow["Normal"].ToString() != "" ? objRow["Normal"].ToString() : null;
string strDriver1Optimistic = objRow["Optimistic"].ToString() != "" ? objRow["Optimistic"].ToString() : null;
string strDriver1Pessimistic = objRow["Pessimistic"].ToString() != "" ? objRow["Pessimistic"].ToString() : null;
data.Add(new LineChartData
{
Name = Convert.ToString(intYear),
Normal = Convert.ToDouble(strDriver1Baseline),
Optimistic = Convert.ToDouble(strDriver1Optimistic),
Pessimistic = Convert.ToDouble(strDriver1Pessimistic)
});
intYear++;
}
return data;
}
}
// This function is in clsTechnicalDriverData:
public DataTable LoadList(string strFilter, string strOrder)
{
if (strFilter == String.Empty)
{
return CD.DAC.ConsultSQL("SELECT * FROM vListTechnicalDriverData " + strOrder).Tables[0];
}
else
{
return CD.DAC.ConsultSQL("SELECT * FROM vListTechnicalDriverData WHERE " + strFilter + " " + strOrder).Tables[0];
}
} this.pnlChart1.Visible = false;
this.pnlChart2.Visible = false;
this.pnlChart3.Visible = false;
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond.SelectedItem.Text))
{
this.pnlChart1.Visible = true;
...
}
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond2.SelectedItem.Text))
{
this.pnlChart2.Visible = true;
...
}
if (!String.IsNullOrEmpty(ddlTechnicalDriverCond.SelectedItem.Text) && !String.IsNullOrEmpty(ddlTechnicalDriverCond2.SelectedItem.Text))
{
this.pnlChart3.Visible = true;
...
}
