Jan 26, 2015, 12:13 PM
[CLOSED] How to change individual slice pie color
Hello,
I'd like to change the color of slices from pie chart, based on their data.
I saw the example in link https://examples2.ext.net/#/Chart/Pie/Pie_Renderer/ and I need to change the function segmentRenderer to change color, but it didn't work well.
thanks,
Oliver
I'd like to change the color of slices from pie chart, based on their data.
I saw the example in link https://examples2.ext.net/#/Chart/Pie/Pie_Renderer/ and I need to change the function segmentRenderer to change color, but it didn't work well.
<%@ Page Language="C#" Culture="en-CA" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
public List<object> Data
{
get
{
return new List<object>
{
new {Name = "On Time", Data1 = 50 },
new {Name = "Delayed", Data1 = 20 },
new {Name = "Another", Data1 = 30 },
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Pie Chart - Ext.NET Examples</title>
<%--<link href="/resources/css/examples.css" rel="stylesheet" />--%>
<script>
var tipRenderer = function (storeItem, item) {
//calculate percentage.
var total = 0;
App.Chart1.getStore().each(function (rec) {
total += rec.get('Data1');
});
this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
};
function segmentRenderer(sprite, record, attr, index, store) {
if (record.get('Name') == 'On Time') { color = "green" };
if (record.get('Name') == 'Delayed') { color = "red" };
if (record.get('Name') == 'Another') { color = "blue" };
return Ext.apply(attr, {
fill: color
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Pie Chart Example</h1>
<ext:Panel
runat="server"
Width="800"
Height="600"
Title=""
Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" Animate="false" Shadow="true" InsetPadding="60"
Theme="Base:gradients">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store1" runat="server" Data="<%# Data %>">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Series>
<ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="30" Highlight="true"
HighlightSegmentMargin="20">
<Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Fn="tipRenderer" />
</Tips>
<Renderer Fn="segmentRenderer" />
</ext:PieSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>thanks,
Oliver
Last edited by Daniil; Jan 30, 2015 at 12:16 PM.
Reason: [CLOSED]
