Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 24 Dec 2014 13:22 by Bob
ADMIN
Stamo Gochev
Created on: 27 Jun 2013 07:44
Category: HtmlChart
Type: Feature Request
17
ADD: Click event for the legend in the RadHtmlChart
Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			//Attach the legendItemClick event on pageLoad:
			var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
		}
                //The following function toggles the visibility of the clicked series from the legend
		function OnLegendClicked(e) {
			//Get a reference to the chart and the target axis
			var chart = e.sender;
			var targetAxisName = e.series.axis;
			var numValueAxes = chart.options.valueAxis.length;
			//Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend
			for (var i = 0; i < numValueAxes; i++) {
				var currValueAxisName = chart.options.valueAxis[i].name;
				if (currValueAxisName == targetAxisName) {
					chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible;
				}
			}
		}
	</script>
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries AxisName="axis1" Name="Series1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3000" />
							<telerik:CategorySeriesItem Y="1000" />
							<telerik:CategorySeriesItem Y="2000" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3500" />
							<telerik:CategorySeriesItem Y="1500" />
							<telerik:CategorySeriesItem Y="2500" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<YAxis Name="axis1" MinValue="0" MaxValue="30">
				</YAxis>
				<AdditionalYAxes>
					<telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY>
				</AdditionalYAxes>
			</PlotArea>
		</telerik:RadHtmlChart>
15 comments
Bob
Posted on: 24 Dec 2014 13:22 
Hi Stamo,

Never mind on this as well.  Apparently version 2013.2.717 uses the Category property instead of series.name for Pie charts.  Once we changed the TooltipsAppearance ClientTemplate to #=category# it worked as required.

Thank You
Bob Baldwin
Trabon Solutions
Bob
Posted on: 22 Dec 2014 17:27 
Hi Stamo,

Thank you for your help.

We now understand why this did not work.  It was hosted within a RadContentTemplateTile.  Once we used Marins code at  http://www.telerik.com/forums/links-are-not-working-in-radtilelist, the event worked as expected.

However, now we have another question.  Why is the series.name in the TooltipsAppearance ClientTemplate being displayed as "undefined" when running the standalone RadHtmlChart code below?  If we change the ClientTemplate to #=series.type# the tooltip correctly displays "pie".  Again, we are on version 2013.2.717.

Thank You
Bob Baldwin
Trabon Solutions

<telerik:RadHtmlChart ID="PieChart1" runat="server" Width="310px" Height="145px" >
                            <ChartTitle Text="Quotes (stats)">
                                <Appearance Position="Top" Align="Center" />
                            </ChartTitle>
                            <Legend>
                                <Appearance Position="Left" />
                            </Legend>
                            <PlotArea>
                                <Series>
                                    <telerik:PieSeries>
                                        <TooltipsAppearance Color="White" ClientTemplate="#=series.name#" />
                                        <LabelsAppearance Visible="false" />
                                        <SeriesItems>
                                            <telerik:PieSeriesItem Name="Active(20)" Y="20" />
                                            <telerik:PieSeriesItem Name="Expired(55)" Y="55" />
                                            <telerik:PieSeriesItem Name="Lost(0)" Y="0" />
                                            <telerik:PieSeriesItem Name="Ordered(11)" Y="11" /> 
                                        </SeriesItems>
                                    </telerik:PieSeries> 
                                </Series>
                            </PlotArea>                                
                        </telerik:RadHtmlChart>
ADMIN
Stamo Gochev
Posted on: 19 Dec 2014 08:17 
Hi Bob,

I tested the suggested workaround with the 2013.2.717 version of our controls and everything seems to be working as expected. Can you send us a support ticket with a sample code snippet, so we can investigate the case and provide you with additional information?
Bob
Posted on: 17 Dec 2014 14:57 
Is this workaround supported within version 2013.2.717 of RadHtmlChart.  We wonder because we can't get the OnLegendClicked to fire when using a Pie Series.

Thx...Bob Baldwin
Trabon
rithy
Posted on: 01 Jan 2014 19:47 
I used HTMLChart version 2013.2.717 which I got error of the line below:
var targetAxisName = e.series.axis;
alert(targetAxisName) //error undefined

I'm appreciate if you can solve it because I do need to get the clicked series name.
Rithy
Jürgen
Posted on: 26 Sep 2013 15:36 
very useful
ADMIN
Stamo Gochev
Posted on: 16 Sep 2013 11:29 
This feature is not in our roadmap for the next Q3 2013 release. If the item receives enough client votes, we might discuss its implementation and provide it in one of our next releases.
Vered
Posted on: 16 Sep 2013 11:15 
This will enable an expected BI functionality...
Keren
Posted on: 16 Sep 2013 11:13 
very handy feature. when is RC1?
Michael
Posted on: 16 Sep 2013 10:55 
good one
Noam
Posted on: 16 Sep 2013 10:49 
looking forward!
ADMIN
Stamo Gochev
Posted on: 16 Sep 2013 05:30 
I cannot give you a fixed date for the release of this feature but as more and more people vote for it we will raise the priority of this task and implement it as soon as possible..
Saranya
Posted on: 13 Sep 2013 17:34 
It will be very useful , when it will be ready?
Gal
Posted on: 26 Aug 2013 09:15 
When it will be ready ?
Igor
Posted on: 23 Aug 2013 06:10 
Very usefull feature !
Create an account Log In
View
Type
Status
Category