PDA

View Full Version : [CLOSED] How to change individual slice pie color



Oliver
Jan 26, 2015, 1:13 PM
Hello,

I'd like to change the color of slices from pie chart, based on their data.

I saw the example in link http://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>


Please, could you help me to make this work.

thanks,

Oliver

fabricio.murta
Jan 26, 2015, 8:08 PM
Hello,

Change your colors to Hexadecimal RGB notation and everything will work. :)

Look at this snippet of your own code:


if (record.get('Name') == 'On Time') { color = "#00ff00" };
if (record.get('Name') == 'Delayed') { color = "#ff0000" };
if (record.get('Name') == 'Another') { color = "#0000ff" };


That's all I needed to change in order to make your sample work. :)

Oliver
Jan 26, 2015, 8:29 PM
Hi,

Thanks avenger, it works, the only problem is that the legend remain with the original colors of the chart, but the main problem was solved.

Thanks :)

Oliver

fabricio.murta
Jan 27, 2015, 2:13 AM
There you go!



var tipRenderer = function (storeItem, item) {
//calculate percentage.
var total = 0;

App.Chart1.getStore().each(function (rec) {
total += rec.get('Data1');
});

var tipLabel = "";
tipLabel = storeItem.get('Name');
var color='tan';
if (tipLabel == 'On Time') color='green';
else if (tipLabel == 'Delayed') color='red';
else if (tipLabel == 'Another') color='blue';

if (this.el)
this.el.setStyle('background', color);
else
this.style = 'background: ' + color;

this.setTitle(tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
};


;)

(yes, that was not easy, you got a good point for not sorting this so easily!)

Oliver
Jan 28, 2015, 12:07 AM
Hello Fabricio, thanks for reply.

The code works perfectly to show Tip renderer with the correct colors changed, but the problem is with the colors of the legend. I'm using the property ShowInLegend="true" and the colors are not correct.

Please if you know how to fix this, give me an example.

Thanks in advance.

Oliver19581

Oliver
Jan 30, 2015, 12:24 AM
There is no way to fix the legend colors?

Thanks!

Oliver

fabricio.murta
Jan 30, 2015, 3:41 AM
Hello, sorry for the delay.

You can get another approach if you want to sync the pie colors with the legend at ease. But you will still have to track the color for the tip, as it is usually a single color all the time.

Look at the code below. Notice that I've removed the segmentRenderer, and now I am setting the color sequence in the colorSet parameter to ext:PieSeries.

After setting the color sequence on colorSet I just load the page and experiment to see which color I should bind to the tipRenderer function in order to have a match.



<!DOCTYPE html>

<html>
<head runat="server">
<title>Pie Chart - Ext.NET Examples</title>
<%--<link href="/resources/css/examples.css" rel="stylesheet" />--%>

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

<script>
var tipRenderer = function (storeItem, item) {
//calculate percentage.
var total = 0;

App.Chart1.getStore().each(function (rec) {
total += rec.get('Data1');
});

var tipLabel = "";
tipLabel = storeItem.get('Name');
var color = 'tan';
if (tipLabel == 'Delayed') color = '#ff0000';
else if (tipLabel == 'On Time') color = '#00ff00';
else if (tipLabel == 'Another') color = '#0000ff';

if (this.el)
this.el.setStyle('background', color);
else
this.style = 'background: ' + color;

this.setTitle(tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />

<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">
<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" ColorSet="#00ff00,#ff0000,#0000ff">
<Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28" StyleSpec="background:blue">
<Renderer Fn="tipRenderer" />
</Tips>
</ext:PieSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>


I hope this helps.

fabricio.murta
Jan 30, 2015, 4:00 AM
And now you may be asking yourself "I wish there were an easier way to track the tips. This color of the font of the tips also bugs me!"

So well, let's just make things easier then, shall we?

Change your tipRenderer function to this:


<script>
var tipRenderer = function (storeItem, item) {
//calculate percentage.
var total = 0;

App.Chart1.getStore().each(function (rec) {
total += rec.get('Data1');
});

var tipLabel = storeItem.get('Name');

color = item.series.colorSet[item.index % 3];

if (this.el)
this.el.setStyle('background', color);
else
this.style = 'background: ' + color;

this.setTitle("<font color='white'>" + tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%</font>');
};
</script>


Voila, tip dynamically getting a color from the available colorSet you specified! And moreover, its font is now a cool, more readable white!.. :)

Just note that, if you have four items on your series (say, Delayed, On Time, Early, Another), the color will cycle once it reachs the last.

For example, if you had a colorSet with red, green, orange, you will have segments like Delayed:red, On Time:green, Early:blue, Another:red (again!). So just make sure you have enough color in the colorSet for the number of things you're going to represent on your pie chart.

I hope this also helps you boost your page. :)

Oliver
Jan 30, 2015, 1:11 PM
Thanks for help Fabricio,

You can mark as closed.

Oliver.