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.