Nov 14, 2013, 6:40 PM
[CLOSED] Line Chart Colors Turn Black in IE8
My application consists of a GridPanel in which one of the columns opens a Window containing a line Chart. See the "View Graph" button in the image:
When the button is clicked, the Store for the Chart is reloaded using record data from the GridPanel. What I'm finding is that the first time the Chart is opened, the colors render correctly (blue and green):
But when I close the Window and then click "View Graph" again to re-open it, the colors turn black:
This is not an issue in Firefox or Chrome, only in IE8. And it seems like it started happening only after I implemented a loading mask fix (reference this post: http://forums.ext.net/showthread.php...ask-ext-charts).
Any ideas what the issue could be? Here is some of the code that might be relevant:
When the button is clicked, the Store for the Chart is reloaded using record data from the GridPanel. What I'm finding is that the first time the Chart is opened, the colors render correctly (blue and green):
But when I close the Window and then click "View Graph" again to re-open it, the colors turn black:
This is not an issue in Firefox or Chrome, only in IE8. And it seems like it started happening only after I implemented a loading mask fix (reference this post: http://forums.ext.net/showthread.php...ask-ext-charts).
Any ideas what the issue could be? Here is some of the code that might be relevant:
<ext:ChartTheme ID="Chart_Theme" runat="server" ThemeName="ChartTheme">
<Axis Stroke="#000000" Font="10px Verdana" FontFamily="Verdana" />
<AxisLabelLeft Fill="#000000" Font="9px Verdana" FontFamily="Verdana" />
<AxisLabelBottom Fill="#000000" Font="10px Verdana" FontFamily="Verdana">
<Rotate Degrees="270" />
</AxisLabelBottom>
<AxisTitleBottom Fill="#000000" Font="12px Verdana" FontFamily="Verdana" FontWeight="Bold" />
<AxisTitleLeft Fill="#000000" Font="12px Verdana" FontFamily="Verdana" FontWeight="Bold" />
</ext:ChartTheme>
<ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="850" Animate="true"
Theme="ChartTheme" Height="400" InsetPadding="30">
<Store>
<ext:Store ID="MonthlyChartStore" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#MChartURL%>' AutoDataBind="true">
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="MChartStoreModel" runat="server">
<Fields>
<ext:ModelField Name="PROJECTED_DATE" Type="Date">
<Convert Handler="return Ext.util.Format.date(value, 'M d Y');" />
</ext:ModelField>
<ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" />
<ext:ModelField Name="MAX_LINE" Type="Float" />
<ext:ModelField Name="EST_70_DATE" Type="String" />
<ext:ModelField Name="EST_MAX_DATE" Type="String" />
<ext:ModelField Name="GROWTH_RATE" Type="Float" />
</Fields>
</ext:Model>
</Model>
<DirectEvents>
<Load OnEvent="MonChartStoreLoad" After="Ext.getCmp('MonthlyChart').refresh(); ">
<ExtraParams>
<ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()"
Mode="Raw" Encode="true" />
<ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</Load>
</DirectEvents>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage(Mon)"
AxisID="Axis1" MajorTickSteps="30">
</ext:NumericAxis>
<ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Months Out(date)" />
</Axes>
<Series>
<ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_MONTH"
Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="1" Radius="1" StrokeWidth="0" />
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));">
</Renderer>
</Tips>
<Listeners>
<AfterRender Fn="drawVerticalMon" />
</Listeners>
</ext:LineSeries>
<ext:LineSeries SeriesID="Series11" Axis="Left" XField="PROJECTED_DATE" YField="MAX_LINE"
Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="1" Radius="1" StrokeWidth="0" />
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="75" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('MAX_LINE'));">
</Renderer>
</Tips>
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker ID="VerticalMarker2" runat="server">
<XLabelRenderer Handler="return value;" />
</ext:VerticalMarker>
</Plugins>
</ext:Chart>
protected void MonChartStoreLoad(object sender, DirectEventArgs e)
{
string InstanceID = "",
Est70Date = "",
EstMaxDate = "",
AllocatedStorage = "",
CurrentUsage = "",
maxLine = "",
ProjectedUsageMonthLastVal = "",
GrowthRate = "";
if (this.hdnInstanceID.Value != null)
InstanceID = Convert.ToString(this.hdnInstanceID.Value);
if (InstanceID.Equals("instanceid", StringComparison.OrdinalIgnoreCase))
InstanceID = "-1";
if (InstanceID != "-1")
{
int index = 0;
string jsonRecord = e.ExtraParams["jsonRecord1"];
dynamic jsonColumns = Newtonsoft.Json.JsonConvert.DeserializeObject(jsonRecord);
foreach (dynamic jsonItem in jsonColumns)
{
Newtonsoft.Json.Linq.JToken token = Newtonsoft.Json.Linq.JObject.Parse(jsonItem.ToString());
InstanceID = Convert.ToString(token.SelectToken("DB_INSTANCE_ID"));
AllocatedStorage = Convert.ToString(token.SelectToken("ALLOCATED_STORAGE"));
CurrentUsage = Convert.ToString(token.SelectToken("CURRENT_USAGE"));
}
string MonthChartData = e.ExtraParams["MonthChartData"];
Dictionary<string, string>[] dictMonthChartData = JSON.Deserialize<Dictionary<string, string>[]>(MonthChartData);
if (dictMonthChartData.Count() > 0)
{
foreach (var record in dictMonthChartData)
{
if (index == 0)
{
Est70Date = record["EST_70_DATE"];
EstMaxDate = record["EST_MAX_DATE"];
maxLine = record["MAX_LINE"];
GrowthRate = record["GROWTH_RATE"];
}
if (index == (dictMonthChartData.Length) - 1)
{
ProjectedUsageMonthLastVal = record["PROJECTED_USAGE_MONTH"];
}
index++;
}
}
if (Convert.ToDecimal(maxLine) > Convert.ToDecimal(ProjectedUsageMonthLastVal))
{
((NumericAxis)MonthlyChart.Axes[0]).SetMaximum((int)Math.Ceiling(Convert.ToDecimal(maxLine)));
((NumericAxis)MonthlyChart.Axes[0]).SetMinimum(0);
MonthlyChart.Redraw();
}
else
{
((NumericAxis)MonthlyChart.Axes[0]).SetMaximum((int)Math.Ceiling(Convert.ToDecimal(ProjectedUsageMonthLastVal)));
((NumericAxis)MonthlyChart.Axes[0]).SetMinimum(0);
MonthlyChart.Redraw();
}
this.InstanceDetailsStore.DataSource = GetData(AllocatedStorage, CurrentUsage, Est70Date, EstMaxDate, GrowthRate);
this.InstanceDetailsStore.DataBind();
}
Thread.Sleep(5000);
PopUpWindow.Body.Unmask();
}
Last edited by Daniil; Nov 19, 2013 at 6:01 AM.
Reason: [CLOSED]