[CLOSED] X and Y axis lines are not black in IE but its working in Firefox

  1. #1

    [CLOSED] X and Y axis lines are not black in IE but its working in Firefox

    HI Daniil

    How to change X and Y axis line to black in IE, its working in Firefox


    Please find the screenshot and code

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
     
     
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                try
                {
                    BindRecords();
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
        }
    
        public void BindRecords()
        {
            DataTable dtSpiCpi = new DataTable();
            dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
            dtSpiCpi.Columns.Add("MonthNYear", typeof(string));
            dtSpiCpi.Columns.Add("Column1", typeof(decimal));
            dtSpiCpi.Columns.Add("Column2", typeof(decimal));
            dtSpiCpi.Columns.Add("Column3", typeof(decimal));
            dtSpiCpi.Columns.Add("Column4", typeof(decimal));
            dtSpiCpi.Columns.Add("Column5", typeof(decimal));
    
            DataRow objRow = null;
    
            for (int index = 1; index <= 12; index++)
            {
                objRow = dtSpiCpi.NewRow();
                objRow["MonthNYear"] = index + "Jan15";
    
                if (index < 3)
                {
                    objRow["Column1"] = Convert.ToDecimal("2.50");
                    objRow["Column3"] = Convert.ToDecimal("2.10");
                    objRow["Column4"] = Convert.ToDecimal("2.00");
                    objRow["Column2"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("1.9");
                }
                else if (index < 5)
                {
                    objRow["Column1"] = Convert.ToDecimal("1.0");
                    objRow["Column2"] = Convert.ToDecimal("2.0");
                    //objRow["Column3"] = Convert.ToDecimal("3.0");
                    objRow["Column4"] = Convert.ToDecimal("4.0");
                    objRow["Column5"] = Convert.ToDecimal("2.9");
                }
                else if (index < 7)
                {
                    //objRow["Column1"] = Convert.ToDecimal("9.0");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("3.0");
                    objRow["Column5"] = Convert.ToDecimal("3.9");
    
                }
                else
                {
                    objRow["Column1"] = Convert.ToDecimal("4.9");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("5.9");
    
                }
                //objRow["Column5"] = Convert.ToDecimal("4.9");
                dtSpiCpi.Rows.Add(objRow);
            }
    
            storeFillRate.RemoveAll();
    
    
            storeFillRate.DataSource = dtSpiCpi;
            storeFillRate.DataBind();
    
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            
        </style>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">   
        </script>
            
            
    
        </ext:XScript>
        <script type="text/javascript" language="javascript">
    
    
             
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="0">
                <tr>
                    <td>
                        <%-- <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                            <Axis Stroke="Black" />
                            <AxisLabelLeft Font="normal 11px Arial" StrokeWidth="0.5" />
                            <AxisLabelBottom Font="normal 11px Arial" StrokeWidth="0.5" />
                            <AxisLabel Font="normal 8.5px Arial" StrokeWidth="0.5" />
                        </ext:ChartTheme>--%>
                        <%-- <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="FancyTheme">
                            <CustomConfig>
                                <ext:ConfigItem Name="colors" Value="['#ffff00', '#00008b', '##ffc0cb', '##87ceeb']" Mode="Raw" /> 
                            </CustomConfig>
                        </ext:ChartTheme>--%>
    
                        <ext:ChartTheme ID="FancyTheme" runat="server" ThemeName="FancyTheme">
                            <%-- <Axis Stroke="Black"   StrokeWidth="1" />
                            <AxisLabelLeft Fill="Black" />
                            <AxisLabelBottom Fill="Black" />
                            <AxisTitleLeft Fill="Black" />
                            <AxisTitleBottom Fill="Black" />
                            <Marker Fill="Black" Stroke="Black"/>--%>
                            <CustomConfig>
                                <ext:ConfigItem Name="colors" Value="['#ffff00', '#00008b', '#ffc0cb', '#87ceeb']" Mode="Raw" />
                            </CustomConfig>
                        </ext:ChartTheme>
    
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Border="false" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartFillRate" runat="server" Shadow="true" Animate="true" Width="955" Height="420" Theme="FancyTheme" ShadowMode="None"
                                    StyleSpec="background:#ffffff">
                                    <Store>
                                        <ext:Store ID="storeFillRate" runat="server">
                                            <Model>
                                                <ext:Model ID="Model36" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="MonthNYear" />
                                                        <ext:ModelField Name="Column1" />
                                                        <ext:ModelField Name="Column2" />
                                                        <ext:ModelField Name="Column3" />
                                                        <ext:ModelField Name="Column4" />
                                                        <ext:ModelField Name="Column5" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <LegendConfig Position="Bottom" BoxStroke="false" LabelFont="8.5pt Arial" />
                                    <Axes>
                                        <ext:NumericAxis Fields="Column1,Column2,Column3,Column4,Column5" Title="FTE">
                                            <LabelTitle Font="normal 11px Arial;" Fill="Black" />
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                            <%--  <GridConfig>
                                                <Odd Stroke="Black" Fill="White">
                                                </Odd>
                                                <Even Stroke="Black" Fill="White" />
                                            </GridConfig>--%>
                                            <GridConfig>
                                                <Odd Opacity="1" Fill="#FFFFFF" Stroke="#bbb" StrokeWidth="0.5" />
                                                <Even Opacity="1" Fill="#FFFFFF" Stroke="#bbb" StrokeWidth="0.5" />
                                            </GridConfig>
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Fields="MonthNYear" Position="Bottom" Title="Month Year">
                                            <LabelTitle Font="normal 11px Arial;" Fill="Black" />
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <Series>
                                        <ext:ColumnSeries Axis="Bottom" XField="MonthNYear" YField="Column1,Column2,Column3,Column4" Stacked="true"
                                            Highlight="true" ShowInLegend="true" Gutter="100">
                                            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="200" Height="28">
                                                <Renderer Handler="this.setTitle(String(item.value[1]) + 'M');" />
                                                <%--<Renderer Handler="this.setTitle(item.storeField + ': ' + String(item.value[1]) +': ' + String(item.value[2]) +': ' + String(item.value[3]) +': ' + String(item.value[4]));" />--%>
                                            </Tips>
                                            <Label FontFamily="Arial" FontSize="8.5px" />
                                        </ext:ColumnSeries>
                                        <ext:LineSeries Axis="Left" XField="MonthNYear" YField="Column5" Title="FTE" Smooth="05">
                                            <MarkerConfig Fill="#FF0000" Stroke="#FF0000" Type="Triangle" Radius="2" StrokeWidth="1" />
                                            <Style Stroke="#FF0000" StrokeWidth="2" />
                                            <%-- <MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                             <Style Stroke="#E15E00" StrokeWidth="2" />--%>
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    Click image for larger version. 
    
    Name:	Stack.png 
    Views:	1 
    Size:	25.1 KB 
    ID:	24194

    Regards
    Praveen
    Last edited by Daniil; Sep 15, 2015 at 7:54 PM. Reason: [CLOSED]
  2. #2
    Hello Praveen!

    I couldn't find your screenshot... So what about using this GridConfig for your NumericAxis?

    <GridConfig>
        <Odd StrokeOpacity="1" FillOpacity="0" Stroke="black" />
        <Even StrokeOpacity="1" FillOpacity="0" Stroke="black" />
    </GridConfig>
    Fabrício Murta
    Developer & Support Expert
  3. #3
    HI Daniil

    Its working partially, let me share the screenshot

    X and Y axis are black in Firefox but in IE is not working( currently displaying as gray i need black)

    Regards
    PRaveen
    Attached Thumbnails XY axis.png  
  4. #4
    Hello PRaveen, this might be an issue related to the browser...

    I am using IE11 here and it was all black. Which IE version are you using? I tested on IE11 and Chrome to attain the same results.

    Here's my screenshot from IE:
    Click image for larger version. 

Name:	60020-chartIE11.png 
Views:	4 
Size:	30.6 KB 
ID:	24211

    What version are you using?
    Fabrício Murta
    Developer & Support Expert
  5. #5

    ITs not working in IE8 and IE9

    HI Daniil


    Its not working in IE8 and IE9.( Can you please provide the solution)


    Regards
    Praveen
  6. #6
    I could not reproduce with IE9, but got it with IE8.

    IE8 uses VML rather than SVG or Canvas which is used in more modern browsers. VML is sort of not ideal. So, issues are possible.

    This appears to help:
    <ext:NumericAxis ...>
        <CustomConfig>
            <ext:ConfigItem Name="axisStyle" Value="{ stroke: 'black', 'stroke-width': 1.35  }" Mode="Raw" />
        </CustomConfig>
        ...
    </ext:NumericAxis>
    
    <ext:CategoryAxis ...>
        <CustomConfig>
            <ext:ConfigItem Name="axisStyle" Value="{ stroke: 'black', 'stroke-width': 1.35  }" Mode="Raw" />
        </CustomConfig>
        ..
    </ext:CategoryAxis>

Similar Threads

  1. Grid upload not working in FireFox
    By Alaswad in forum 2.x Help
    Replies: 2
    Last Post: Sep 15, 2014, 5:04 AM
  2. [CLOSED] Line chart- Working with multiple lines
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 10
    Last Post: Jul 29, 2013, 4:09 AM
  3. [CLOSED] Div's editor not working in Firefox
    By softmachine2011 in forum 2.x Premium Help
    Replies: 2
    Last Post: Sep 03, 2012, 3:19 PM
  4. Replies: 3
    Last Post: May 08, 2011, 2:08 AM
  5. Replies: 0
    Last Post: Apr 15, 2010, 3:15 AM

Tags for this Thread

Posting Permissions