What Happens When Series Are Clicked In the Legend

3 posts, 1 answers
  1. Avs8686
    Avs8686 avatar
    12 posts
    Member since:
    Feb 2013

    Posted 25 Mar 2014 Link to this post

    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. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 26 Mar 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Avs8686
    Avs8686 avatar
    12 posts
    Member since:
    Feb 2013

    Posted 26 Mar 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thank you for taking the time to respond to my problem. You have guided me in the right direction and I have achieved what I set out to do.

    Thanks!
Back to Top