[CLOSED] problem line color into the chart for different browser

  1. #1

    [CLOSED] problem line color into the chart for different browser

    Hi,

    When I run my page into the firefox 18.0 I see this
    Click image for larger version. 

Name:	firefox.JPG 
Views:	91 
Size:	58.2 KB 
ID:	5648
    If I run my page in IE8 in standard mode I see this
    Click image for larger version. 

Name:	ie8.JPG 
Views:	94 
Size:	54.6 KB 
ID:	5649

    I need to run the page into the IE8 and I want to see the line color like into the firefox

    I attached the complete example below
    <%@ Page Language = "C#"%>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        public class MonitorViewer
        {
            private double yieldValue;
            private int pnFirstOk;
            private int pnFirstKo;
            private int pnTotalPass;
            private string period;
             
            public MonitorViewer() {}
             
            public double YieldValue {
                get { return yieldValue; }
                set { yieldValue = value; }
            }
             
            public int PnFirstOk {
                get { return pnFirstOk; }
                set { pnFirstOk = value; }
            }
             
            public int PnFirstKo {
                get { return pnFirstKo; }
                set { pnFirstKo = value; }
            }
             
            public int PnTotalPass {
                get { return pnTotalPass; }
                set { pnTotalPass = value; }
            }
             
            public string Period {
                get { return period; }
                set { period = value; }
            }
        }
         
        public object[] DataValue () {
                IList<MonitorViewer> listItems = new List<MonitorViewer>();
                MonitorViewer monitorViewer1 = new MonitorViewer();
                monitorViewer1.YieldValue = Double.Parse("95,97");
                monitorViewer1.Period= "30/03/12 - 20/04/12";
                monitorViewer1.PnFirstOk = 7507;
                monitorViewer1.PnFirstKo = 315;
                monitorViewer1.PnTotalPass = 7994;
                 
                MonitorViewer monitorViewer2 = new MonitorViewer();
                monitorViewer2.YieldValue = Double.Parse("96,68");
                monitorViewer2.Period= "20/04/12 - 12/05/12";
                monitorViewer2.PnFirstOk = 5995;
                monitorViewer2.PnFirstKo = 206;
                monitorViewer2.PnTotalPass = 6504;
                 
                MonitorViewer monitorViewer3 = new MonitorViewer();
                monitorViewer3.YieldValue = Double.Parse("95,91");
                monitorViewer3.Period= "12/05/12 - 03/06/12";
                monitorViewer3.PnFirstOk = 9732;
                monitorViewer3.PnFirstKo = 415;
                monitorViewer3.PnTotalPass = 10209;
                 
                MonitorViewer monitorViewer4 = new MonitorViewer();
                monitorViewer4.YieldValue = Double.Parse("96,09");
                monitorViewer4.Period= "03/06/12 - 24/06/12";
                monitorViewer4.PnFirstOk = 6710;
                monitorViewer4.PnFirstKo = 273;
                monitorViewer4.PnTotalPass = 7309;
                 
                MonitorViewer monitorViewer5 = new MonitorViewer();
                monitorViewer5.YieldValue = Double.Parse("96,29");
                monitorViewer5.Period= "24/06/12 - 16/07/12";
                monitorViewer5.PnFirstOk = 1922;
                monitorViewer5.PnFirstKo = 74;
                monitorViewer5.PnTotalPass = 2021;
                 
                MonitorViewer monitorViewer6 = new MonitorViewer();
                monitorViewer6.YieldValue = Double.Parse("0,0");
                monitorViewer6.Period= "16/07/12 - 07/08/12";
                monitorViewer6.PnFirstOk = 0;
                monitorViewer6.PnFirstKo = 0;
                monitorViewer6.PnTotalPass = 0;
                 
                MonitorViewer monitorViewer7 = new MonitorViewer();
                monitorViewer7.YieldValue = Double.Parse("0,0");
                monitorViewer7.Period= "07/08/12 - 28/08/12";
                monitorViewer7.PnFirstOk = 0;
                monitorViewer7.PnFirstKo = 0;
                monitorViewer7.PnTotalPass = 0;
                 
                listItems.Add(monitorViewer1);
                listItems.Add(monitorViewer2);
                listItems.Add(monitorViewer3);
                listItems.Add(monitorViewer4);
                listItems.Add(monitorViewer5);
                listItems.Add(monitorViewer6);
                listItems.Add(monitorViewer7);
                 
                object[] periodArray = new object
    [listItems.Count];
                for (int i = 0;i < listItems.Count;i++) {
                    MonitorViewer monitorViewer = listItems[i];
                    object[] itemArray = new object[]{monitorViewer.YieldValue,monitorViewer.Period,monitorViewer.PnFirstOk,monitorViewer.PnFirstKo,monitorViewer.PnTotalPass};
                     
                    periodArray[i] = itemArray;
                }
                return periodArray;
            }
             
            public void Page_Load() {
                var store = this.yieldChart.GetStore();
                store.DataSource = DataValue();
                store.DataBind();
            }
    </script>
     
    <body>
        <form Method=post Runat="server">
            <ext:ResourceManager Id="resourceManager" runat="server" />
                <h3>Example</h3>
                <ext:ChartTheme
                    ID="CustomThemeID"
                    runat="server"
                    ThemeName="CustomTheme"
                    Colors="url(#blueColor),url(#greenColor),url(#redColor),url(#orangeColor)">
                </ext:ChartTheme>
                 
                <ext:Panel ID="panel1" runat="server" Height="450" Layout="FitLayout" MarginSpec="0 0 3 0" Hidden="false">
                    <Bin>
                        <ext:Store ID="yieldStore" runat="server">
                            <Reader>
                                <ext:ArrayReader />
                            </Reader>
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="yield"/>
                                        <ext:ModelField Name="period"/>
                                        <ext:ModelField Name="pnFirstOk"/>
                                        <ext:ModelField Name="pnFirstKo"/>
                                        <ext:ModelField Name="pnTotalPass"/>
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Bin>
                    <Items>
                        <ext:Chart
                            ID="yieldChart"
                            runat="server"
                            Flex="1"
                            Theme="CustomTheme"
                            Shadow="true"
                            Animate="true"
                            StoreID="yieldStore">
         
                            <Gradients>
                                <ext:Gradient GradientID="redColor" Angle="0">
                                    <Stops>
                                        <ext:GradientStop Offset="0" Color="#e21413" />
                                        <ext:GradientStop Offset="100" Color="#d82931" />
                                    </Stops>
                                </ext:Gradient>
         
                                <ext:Gradient GradientID="orangeColor" Angle="0">
                                    <Stops>
                                        <ext:GradientStop Offset="0" Color="#ecbe38" />
                                        <ext:GradientStop Offset="100" Color="#dc9614" />
                                    </Stops>
                                </ext:Gradient>
         
                                <ext:Gradient GradientID="greenColor" Angle="0">
                                    <Stops>
                                        <ext:GradientStop Offset="0" Color="#3ed730" />
                                        <ext:GradientStop Offset="100" Color="#3ea830" />
                                    </Stops>
                                </ext:Gradient>
         
                                <ext:Gradient GradientID="blueColor" Angle="0">
                                    <Stops>
                                        <ext:GradientStop Offset="0" Color="#4868e7" />
                                        <ext:GradientStop Offset="100" Color="#3c56bf" />
                                    </Stops>
                                </ext:Gradient>
                            </Gradients>
                             
                            <Axes>
                                <ext:NumericAxis Position="Left" Fields="yield" Minimum="0" />
                                <ext:NumericAxis Position="Right" Minimum="0" Fields="pnFirstOk,pnFirstKo,pnTotalPass" Hidden="true">
                                </ext:NumericAxis>
                                <ext:CategoryAxis Position="Bottom" Fields="period">
                                    <Label Font="10px Arial">
                                        <Rotate Degrees="270" />
                                        <Renderer Handler="return Ext.String.ellipsis(value, 15, false);" />
                                    </Label>
                                </ext:CategoryAxis>
                            </Axes>
                 
                                <Series>
                                    <ext:ColumnSeries Axis="Left" Highlight="true" XField="period" YField="yield">
                                        <Style Fill="#38B8BF" StrokeWidth="3" />
                                        <Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
                                    </ext:ColumnSeries>
                                    <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
                                        <Style StrokeWidth="3" />
                                           <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                    </ext:LineSeries>
                                    <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
                                        <Style StrokeWidth="3" />
                                           <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                    </ext:LineSeries>
                                    <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
                                        <Style StrokeWidth="3" />
                                           <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                    </ext:LineSeries>
                                </Series>
                        </ext:Chart>
                    </Items>
                </ext:Panel>
        </form>
    </Body>
    </Html>
    How can change the code in order to see the chart like into the firefox?
    Thank you.
    Last edited by geoffrey.mcgill; Feb 19, 2013 at 7:45 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Try the following:

    <Series>
    	<ext:ColumnSeries Axis="Left" Highlight="true" XField="period" YField="yield">
    		<Style Fill="#38B8BF" StrokeWidth="3" Stroke="#4868e7" />
    		<Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
    	</ext:ColumnSeries>
    	<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
    		<Style StrokeWidth="3" Stroke="#3ed730" />
    		<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" Stroke="#3ed730" />
    	</ext:LineSeries>
    	<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
    		<Style StrokeWidth="3" Stroke="#e21413" />
    		<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" Stroke="#e21413" />
    	</ext:LineSeries>
    	<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
    		<Style StrokeWidth="3" Stroke="#ecbe38" />
    		<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" Stroke="#ecbe38" />
    	</ext:LineSeries>
    </Series>
  3. #3
    Hi,

    thank you for the reply, now it works.

Similar Threads

  1. [CLOSED] Line chart with 500 points and more
    By interlev in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 21, 2013, 2:58 PM
  2. Multi Line Chart Functionality
    By rdustin in forum 2.x Help
    Replies: 0
    Last Post: Nov 28, 2012, 6:11 PM
  3. [CLOSED] Chart Line
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  4. Line chart grouping of dates on x-asis
    By nomz in forum 2.x Help
    Replies: 1
    Last Post: Jun 08, 2012, 3:01 PM
  5. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM

Posting Permissions