Aug 27, 2015, 9:07 AM
[CLOSED] how to please tell me change Stacked chart background color
HI Daniil
Can you please tell me how to change Stacked chart background color
For example :
COloumn1 background color should be : Yellow
COloumn2 background color should be : Green
COloumn3 background color should be : Red
COloumn4 background color should be : Gray
Below is code
Can you please tell me how to change Stacked chart background color
For example :
COloumn1 background color should be : Yellow
COloumn2 background color should be : Green
COloumn3 background color should be : Red
COloumn4 background color should be : Gray
Below is 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="1">
<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" />
</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">
<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">
<Label FontSize="8.5pt" FontFamily="Arial" />
</ext:NumericAxis>
<ext:CategoryAxis Fields="MonthNYear" Position="Bottom" Title="Month Year">
<Label FontFamily="Arial" FontSize="8.5" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:ColumnSeries Axis="Bottom" XField="MonthNYear" YField="Column1,Column2,Column3,Column4" Stacked="true" Highlight="true" ShowInLegend="true">
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="65" Height="28">
<Renderer Handler="this.setTitle(String(item.value[1]) + 'M');" />
</Tips>
<Label FontFamily="Arial" FontSize="8.5px" />
</ext:ColumnSeries>
<ext:LineSeries Axis="Left" XField="MonthNYear" YField="Column5" Title="FTE" Smooth="3">
<MarkerConfig Fill="#FF0000" Stroke="#FF0000" Type="Circle" Radius="2" StrokeWidth="1" />
<Style Stroke="#FF0000" StrokeWidth="1" />
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</td>
</tr>
</table>
</form>
</body>
</html>
Last edited by Daniil; Sep 01, 2015 at 2:39 PM.
Reason: [CLOSED]