Hi ,
Is there a way to highlight / break out a slice of a pie chart programmatically?
Thank you,
Vamsi.
Hi ,
Is there a way to highlight / break out a slice of a pie chart programmatically?
Thank you,
Vamsi.
Hello @Vamsi!
You have the Ext.chart.AbstractChart.setHighlightItem() method to do so. There's an example using it in a bar chart: Combination Chart Samples > Dashboard.
Hope this helps!
Hi,
I tried as you mentioned method setHighlightItem, but no luck.
Thank you,
Vamsi.
Hello @Vamsi!
Maybe the example is a little too complex and involves more than is necessary for you to understand the concept. Please share a test case showing your basic scenario, and how you're trying to do so.
Then from that, we'll be able to pinpoint what's left for your objective to be attained. I believe that would be a sure-shot to allow us to properly help you, with something closer to what you need.
Looking forward to your follow-up!
Hi Sir,
I have to push out the slice of pie chart programmatically as shown in attached image like popup April slice
Here is my code:Thank you,Code:<%@ Page Language="C#" %>
<script runat="server">
public List<object> Data
{
get
{
return new List<object>
{
new { Month = "Jan", Data = 0 },
new { Month = "Feb", Data = 20 },
new { Month = "Mar", Data = 0 },
new { Month = "Apr", Data = 18},
new { Month = "May", Data = 18},
new { Month = "Jun", Data = 0},
new { Month = "Jul", Data = 16},
new { Month = "Aug", Data = 1},
new { Month = "Sep", Data = 16},
new { Month = "Oct", Data = 16},
new { Month = "Nov", Data = 15},
new { Month = "Dec", Data = 1}
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
Ext.Net.X.Js.Call("Sliceout");
}
</script>
<script>
function Sliceout() {
App.Chart1.setHighlightItem("Apr");
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Stacked Bar Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Pie Bar Chart Sample</h1>
<ext:Container
runat="server"
Width="800"
Height="500"
Layout="FitLayout">
<Items>
<ext:PolarChart
ID="Chart1"
runat="server" FlipXY="true">
<Store>
<ext:Store runat="server" Data="<%# Data %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Data" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<LegendConfig Dock="bottom" runat="server" />
<Interactions>
<ext:ItemHighlightInteraction />
<ext:RotateInteraction />
</Interactions>
<Series>
<ext:PieSeries
AngleField="Data"
ShowInLegend="true"
Donut="0"
HighlightMargin="20">
<Label Field="Month" Display="Rotate" FontSize="18" FontFamily="Arial" />
</ext:PieSeries>
</Series>
</ext:PolarChart>
</Items>
</ext:Container>
</form>
</body>
</html>
Vamsi.
Hello @Vamsi!
Thanks for providing the test case. It seems you weren't sure how to get the item to be highlighted in the charts? Just providing"Apr"is very very misleading (for the application) as there are so many places to look for it. Besides, in the documentation, it says the parameter "must be the one that you get from item events". Which well, I agree does not help much.
In turn, the example using it suggests how you can get that given a record. Well again, in a misleading way, because it names the record as storeItem (this is the exact location in the example pointed in our last post). While a record is an item within a store, this makes a little harder to infer we're talking about store records there.
Now, knowing that what we need is a record from the chart store, all that's left is just aApp.Chart1.getStore().findRecord("Month", "Apr"), and voila, puzzle solved!
Still confused? Here's how a working version of your client-side method would look like:
And that's about it! Hope this helps!Code:function Sliceout() {
var chart = App.Chart1,
store = chart.getStore(),
record = store.findRecord("Month", "Apr"),
record_id = store.indexOf(record),
series = chart.getSeries()[0],
series_item = series.getItemByIndex(record_id);
chart.setHighlightItem(series_item);
}
Thank you for quick reply and now working as expected for normal pie chart.
But there was an issue with 3D pie chart is not working with above code. Is there any code changes required in 3D pie chart.
Thank you,
Vamsi.
Sir,Waiting for your reply.
Thank you,
Vamsi.
Hello @Vamsi!
Sorry for the delay, I am just posting to let you know I'm looking at the issue right away. Hopefully will post back again soon.
Hello again, @vamsi!
Unfortunately thesetHighlightItem()method is broken for the pie 3d series. The slice retrieved via mouse pointer (which is correctly highlighted) does not match the one thegetItemByIndex()returns.
I couldn't find a simple override to make it work the way it is now, we'd needed to log this as an issue. We've then logged the issue after #1646 in github and will post a follow-up here as soon as we have the issue logged.
We've elaborated on the test case you provided with the pie3d (side by side with a 2d one). The reviewed test case illustrating the exact problem is in the github issue pointed above.
Hope you understand. Again, we're going to post a follow-up here as soon as we get the issue fixed, but we don't really have exactly when that'd happen.
Thank you, Can you please fix the issue at earliest as we have to release to customers with this feature.
Thank you,
Vamsi.
Sir,
Waiting for your reply as request you to fix as ASAP.
Thank you,
Vamsi.
Hello @Vamsi!
I understand your anticipation to get this feature working, but we would need some time to be able to handle it. For the time being, please use the 2d pie. As we said before, we'll post a follow-up here as soon as we have this issue fixed, either from a Sencha Ext JS upgrade (if they fix it), or by our own.
Hope you understand.
Any update on this?
Thank you,
Vamsi.
Hello,
Any update on this? Our customers are asking for it..Please let me know when it will be fix.
Thank you,
Vamsi.
Hello @Vamsi!
We have looked up this issue to assess including it in the current release but it didn't work out, unfortunately. It was noticed changes regarding Pie Charts in recent Ext JS versions, but such changes didn't address this issue.
Unfortunately that's what we can say about this at the moment. I will try to take a look at this so we can at least include the feature in Ext.NET 5.2, will post a follow-up soon about the success of the attempt.
Hello again @vamsi!
Here's how thesliceout()function should look like for it to work with both pie and pie3d charts; it has an extra step for pie 3d ones.
This should work with your provided test case; notice the "Apr" constant value in the third line of the code above; you probably want to replace that to the record you want to highligh.Code:function Sliceout(chart) {
var store = chart.getStore(),
record = store.findRecord("Month", "Apr"),
record_id = store.indexOf(record),
series = chart.getSeries()[0],
series_item = series.getItemByIndex(record_id),
spids = [],
first_sprite, last_sprite, sprites, sprites_per_rec;
if (Ext.getClassName(series) == "Ext.chart.series.Pie3D") {
sprites_per_rec = series.spritesPerSlice;
first_sprite = record_id * sprites_per_rec;
last_sprite = first_sprite + sprites_per_rec;
sprites = series.getSprites();
series_item.sprite = sprites.slice(first_sprite, last_sprite);
}
chart.setHighlightItem(series_item);
}
Hope this helps!
We have also applied a proper fix to Ext.NET sources. It will be available next release, be it 5.1.1 or 5.2.0 (still to be defined).
Thanks again for reporting the issue, and sorry for the delay solving it!