PDA

View Full Version : [CLOSED] How can change color for only one chart column



tactime10
Feb 11, 2013, 4:14 PM
Hi,

I need to change the color for one column of the chart,
an example you can see in attached image (the image show the borders as different color instead I want to fill the column with different color)
5585

I try in this way specifying the index of column for the 'value', but it doesn't work.


function barRenderer(sprite, record, attr, index, store) {
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];

return Ext.apply(attr, {
fill: color
});
}

Can you help me for this issue?
Thank you so much

Baidaly
Feb 11, 2013, 11:42 PM
Hello!

Please, try the following sample:



<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public List<object> Data
{
get
{
return new List<object>
{
new {Year = 2005, Comedy = 5 },
new {Year = 2006, Comedy = 2 },
new {Year = 2007, Comedy = 3 },
new {Year = 2008, Comedy = 4 }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>
<script>
function columnRenderer(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: index == 0 ? '#FF0': '#F0F'
});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel
runat="server"
Width="800"
Height="400"
Title="Stacked Bar Chart - Movies by Genre"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Animate="true">
<Store>
<ext:Store
runat="server"
Data="<%# Data %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Year" />
<ext:ModelField Name="Comedy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Axes>
<ext:NumericAxis
Fields="Comedy"
Position="Left">
</ext:NumericAxis>

<ext:CategoryAxis Fields="Year" Position="Bottom" />
</Axes>

<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Year"
YField="Comedy">
<Renderer Fn="columnRenderer"></Renderer>
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

tactime10
Feb 12, 2013, 8:08 AM
Hi,

Thank you so much for the example, now it works.