PDA

View Full Version : [CLOSED] how to please tell me change Stacked chart background color



praveencat123
Aug 27, 2015, 9:07 AM
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

<%@ 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>

Daniil
Aug 27, 2015, 2:32 PM
Hi @praveencat123,

Please use:

<ext:ChartTheme runat="server" ThemeName="MyChartTheme">
<CustomConfig>
<ext:ConfigItem Name="colors" Value="['yellow', 'green', 'red', 'gray']" Mode="Raw" />
</CustomConfig>
</ext:ChartTheme>

<ext:Chart ... Theme="MyChartTheme">

praveencat123
Sep 01, 2015, 1:43 PM
Thanks Daniil its working