This is a migrated thread and some comments may be shown as answers.

What Happens When Series Are Clicked In the Legend

2 Answers 81 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Avs8686 asked on 25 Mar 2014, 07:46 PM

chart.jpg

chart2.jpg

Hello there,

I have a RadHtmlChart which has multiple LineSeries series. In the legend, when clicking on the one of the series, it neatly toggles on and off that series from the chart. This functionality is really cool; however, I've been trying to figure out what is occurring behind the scenes. Is the chart's repaint() function being called on each click?

Here is why I'm trying to further understand this. I have a little function that I wrote that automatically hides every nth label along the x axis depending upon the number of data points there are after I bind some data client side. It's a work around to the overcrowding of labels that can occur along the x-axis with large data sets. See attached image if I've lost you.

Anyways, when clicking on a series in the legend, it takes away that series as it should, but all of the date labels have reappeared as shown in attached 2. I'm looking for an event to be able to hook into so I can call my function that hides the labels.

I appreciate all input and ideas.

2 Answers, 1 is accepted

Accepted

answered on 26 Mar 2014, 02:34 PM

Hello Andrew ,

What actually happens when you click on the chart's legend items is to hide the corresponding series and then call the internal redraw() method. It is similar to the following JavaScript code:

$find("RadHtmlChart1")._chartObject.options.series[0].visible = false;

$find("RadHtmlChart1").repaint();

where RadHtmlChart1 is the ClientID of the chart and 0 is the index of the clicked legend item.

What I can suggest, in order to handle the mentioned labels issue is to set a particular step for them:
- Either in the markup:
ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">

<PlotArea>

<Series>

<telerik:LineSeries DataFieldY="ID" Name="Series 1">

<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">

</LabelsAppearance>

<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />

</telerik:LineSeries>

<telerik:LineSeries DataFieldY="SellQuantity" Name="Series 2">

<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">

</LabelsAppearance>

<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />

</telerik:LineSeries>

</Series>

<XAxis BaseUnit="days" DataLabelsField="SellDate">

<TitleAppearance Text="Sell Date">

</TitleAppearance>

<LabelsAppearance DataFormatString="d" Step="2">

</LabelsAppearance>

<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>

<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Quantity">

</TitleAppearance>

<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>

<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>

</YAxis>

</PlotArea>

<ChartTitle Text="Sold Cars per Date">

</ChartTitle>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("SellQuantity", typeof(int));

dt.Columns.Add("SellDate", typeof(DateTime));

dt.Rows.Add(1, 2, new DateTime(2014, 03, 12));

dt.Rows.Add(2, 5, new DateTime(2014, 03, 13));

dt.Rows.Add(3, 6, new DateTime(2014, 03, 17));

dt.Rows.Add(4, 4, new DateTime(2014, 03, 18));

dt.Rows.Add(5, 7, new DateTime(2014, 03, 19));

return dt;

}

- Or on the client:
JavaScript:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script>

function pageLoad() {

$find("<%=RadHtmlChart1.ClientID%>")._chartObject.options.categoryAxis.labels.step = 4;

$find("<%=RadHtmlChart1.ClientID%>").repaint();

}

</script>

</telerik:RadCodeBlock>

Regards,
Danail Vasilev
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

What Happens When Series Are Clicked In the Legend

2 Answers, 1 is accepted