PDA

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



praveencat123
Sep 02, 2015, 9:47 AM
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>
24194


Regards
Praveen

fabricio.murta
Sep 03, 2015, 7:37 PM
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>

praveencat123
Sep 04, 2015, 10:59 AM
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

fabricio.murta
Sep 04, 2015, 4:45 PM
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:
24211

What version are you using?

praveencat123
Sep 07, 2015, 5:00 AM
HI Daniil


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


Regards
Praveen

Daniil
Sep 07, 2015, 9:21 AM
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>