Sep 20, 2016, 8:29 AM
[CLOSED] Chart legend tooltip
I have a pie chart with certain error codes. Currently those codes are shown in the legend. Is there any way to show a tooltip when hovering over the code in the legend? The code description can be quite long (and not unique), so using the description in the legend is not an option.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
Ext.define('Ext.chart.series.Pie3D', {
override: 'Ext.chart.series.Pie3D',
updateLabelData: function ()
{
return true;
}
});
</script>
<script runat="server">
protected void Page_Load( object sender, EventArgs e )
{
if ( !X.IsAjaxRequest )
{
this.storeFailures.DataSource = this.Data;
this.storeFailures.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { 5240, 270, "Here goes very long description" },
new object[] { 1294, 253, "Here goes yet another very long description" },
new object[] { 9832, 217, "Here goes very long description" },
new object[] { 1642, 58, "Here goes very long description" },
new object[] { 661, 53, "Here goes very long description" }
};
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout">
<Items>
<ext:PolarChart ID="chartFailures" runat="server" Animation="true" Shadow="true" Flex="1">
<Background Fill="#FFFFFF"></Background>
<LegendConfig runat="server" Dock="Right" BoxStrokeWidth="0" />
<Store>
<ext:Store ID="storeFailures" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ErrorCode" Type="Int"></ext:ModelField>
<ext:ModelField Name="Calls" Type="Int"></ext:ModelField>
<ext:ModelField Name="ErrorCodeDescription" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Interactions>
<ext:RotatePie3DInteraction />
</Interactions>
<Series>
<ext:Pie3DSeries Donut="40" AngleField="Calls" ShowInLegend="true" Highlight="true">
<Label Field="ErrorCode" Display="Rotate" Font="16px Arial">
<Renderer Handler="return '';"></Renderer>
</Label>
<Tooltip ID="Tips1" TrackMouse="true" runat="server" Width="220" Height="28">
<Renderer Handler="toolTip.setHtml(record.get('ErrorCode') + ': ' + record.get('Calls'));"></Renderer>
</Tooltip>
<Listeners>
<ItemClick Handler="alert('ItemClick');"></ItemClick>
</Listeners>
</ext:Pie3DSeries>
</Series>
<Plugins>
<ext:ChartItemEvents runat="server" />
</Plugins>
</ext:PolarChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by fabricio.murta; Oct 11, 2016 at 9:06 PM.