[CLOSED] Line Chart Colors Turn Black in IE8

  1. #1

    [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:
    Click image for larger version. 

Name:	grid.PNG 
Views:	13 
Size:	11.5 KB 
ID:	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):
    Click image for larger version. 

Name:	first.PNG 
Views:	14 
Size:	40.3 KB 
ID:	7210

    But when I close the Window and then click "View Graph" again to re-open it, the colors turn black:
    Click image for larger version. 

Name:	second.PNG 
Views:	13 
Size:	35.2 KB 
ID:	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...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]
  2. #2
    Quote Originally Posted by elisa View Post
    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).
    I take that back. I removed this logic and the issue with the black lines is still happening.
  3. #3
    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_INSTANCE_ID'),record.get('INSTANCE_NAME'),record.get('ALLOCATED_STORAGE'),record.get('CURRENT_USAGE'),record.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?
  4. #4
    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.
  5. #5
    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.

Similar Threads

  1. Replies: 2
    Last Post: Nov 07, 2013, 1:03 PM
  2. [CLOSED] Grouping in Line Chart
    By alscg in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 09, 2013, 8:00 AM
  3. [CLOSED] Chart Line
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  4. [CLOSED] How to manage column colors in a chart from code behind.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 04, 2012, 12:34 PM
  5. GridPanel line colors
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Feb 06, 2009, 2:58 PM

Tags for this Thread

Posting Permissions