PDA

View Full Version : [CLOSED] Line Chart Colors Turn Black in IE8



elisa
Nov 14, 2013, 6:40 PM
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:
7209

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):
7210

But when I close the Window and then click "View Graph" again to re-open it, the colors turn black:
7211

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?27175-mask-unmask-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({selectedOnl y: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(json Record);

foreach (dynamic jsonItem in jsonColumns)
{
Newtonsoft.Json.Linq.JToken token = Newtonsoft.Json.Linq.JObject.Parse(jsonItem.ToStri ng());

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(m axLine)));
((NumericAxis)MonthlyChart.Axes[0]).SetMinimum(0);
MonthlyChart.Redraw();
}
else
{
((NumericAxis)MonthlyChart.Axes[0]).SetMaximum((int)Math.Ceiling(Convert.ToDecimal(P rojectedUsageMonthLastVal)));
((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();
}

elisa
Nov 14, 2013, 7:51 PM
And it seems like it started happening only after I implemented a loading mask fix (reference this post: http://forums.ext.net/showthread.php?27175-mask-unmask-ext-charts).

I take that back. I removed this logic and the issue with the black lines is still happening.

elisa
Nov 14, 2013, 8:09 PM
I've narrowed down the issue. It has to do with this javascript code I have to draw a vertical line onto the chart:


var vertLineMon = false;

function resetVertLines() {
vertLineMon = false;
App.MonthlyChart.surface.removeAll();
}

function drawVerticalMon(item) {
var c = this.chart,
yAxis = c.axes.items[0],
xAxis = c.axes.items[1],
dt = new Date(),
xID = -1;

while (xID == -1) {
xID = c.store.find("PROJECTED_DATE", Ext.util.Format.date(dt, 'M d Y'));
dt.setDate(dt.getDate() - 1);
}

xID += 1;
var x = xAxis.x + Math.floor(xAxis.length * xID / xAxis.to) - 10;

if (!vertLineMon) {
c.surface.add({
type: 'path',
stroke: 'red',
'stroke-width': 1,
path: [
'M' + x + ' ' + yAxis.y,
'V' + (yAxis.y - yAxis.length + 2) + ' Z'
].join(' ')
}).show(true);

vertLineMon = true;
}
}


Every time the Window is closed and re-opened by clicking "View Graph", a DirectMethod is called:


<ext:ImageCommandColumn ID="CommandColumn1" runat="server" Width="110">
<Commands>
<ext:ImageCommand Icon="ChartCurve" CommandName="ViewGraph" Text="View Graph" />
</Commands>
<Listeners>
<Command Handler="#{PopUpWindow}.show(); App.direct.ShowChart(command,record.get('DB_INSTAN CE_ID'),record.get('INSTANCE_NAME'),record.get('AL LOCATED_STORAGE'),record.get('CURRENT_USAGE'),reco rd.get('EST_70_DATE'),record.get('EST_MAX_DATE'));" />
</Listeners>
</ext:ImageCommandColumn>



[DirectMethod]
public void ShowChart(string command, string InstanceID, string InstanceName, string AllocatedStorage, string CurrentUsage, string Est70Date, string EstMaxdate)
{
X.Js.Call("resetVertLines");

// rest of the code
}


When I comment out that line in the code, the colors stay consistent, but then I can't get rid of the vertical line drawn previously on the chart even though the store is refreshed. Suggestions?

elisa
Nov 14, 2013, 8:34 PM
I figured it out. I needed to save the reference to the Sprite object and remove only this object from the Surface.


var vertLineMon = null;

function resetVertLines() {
App.MonthlyChart.surface.remove(vertLineMon);
vertLineMon = null;
}

function drawVerticalMon(item) {
var c = this.chart,
yAxis = c.axes.items[0],
xAxis = c.axes.items[1],
dt = new Date(),
xID = -1;

while (xID == -1) {
xID = c.store.find("PROJECTED_DATE", Ext.util.Format.date(dt, 'M d Y'));
dt.setDate(dt.getDate() - 1);
}

xID += 1;
var x = xAxis.x + Math.floor(xAxis.length * xID / xAxis.to) - 10;

if (!vertLineMon) {
vertLineMon = c.surface.add({
type: 'path',
stroke: 'red',
'stroke-width': 1,
path: [
'M' + x + ' ' + yAxis.y,
'V' + (yAxis.y - yAxis.length + 2) + ' Z'
].join(' ')
}).show(true);
}
}


Sorry for the multiple posts, but it's worth it just in case I don't actually figure it out and you guys take a while to respond.

Baidaly
Nov 14, 2013, 10:13 PM
Hello!

Sorry for the delay. It seems that your sample from the first post was not full. It's difficult to say what's wrong without a fully runnable sample.

However, nice job, for sure it will be useful for other forum members.