Is there a hover property for Rach chart series

Thread is closed for posting
4 posts, 1 answers
  1. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 26 May 2014 Link to this post

    I want to know is there  a hovering feature for rad chart.

    Regards,
                     Suhashini
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 28 May 2014 Link to this post

    Hello Suhashini,

    RadChart doesn't support hover effects. If you want, however, to display particular tooltip when hovering over series items you can set the ActiveRegion.Tooltip property of the series item in the item data bound event. You can also integrate the RadToolTip control in this scenario. Such an example is illustrated here.

    I can also suggest that you try the newer HtmlChart control that render entirely on the client as SVG instead of the obsolete RadChart. The newer controls also supports client-hover events. More information on the pros and cons of both charts can be found in RadHtmlChart vs. RadChart, round 2. Which one is right for me? blog post. You may also useful Migrating from RadChart to RadHtmlChart
    set of articles
    that sheds more light on how to migrate the basic chart setup from RadChart to RadHtmlChart.



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 06 Jun 2014 in reply to Danail Vasilev Link to this post

    Thanks Danial ,i am using Rad manager tool tip is working fine can i assign the tool tip to the series name rather  than to the bubble chart?
  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 10 Jun 2014 Link to this post

    Hello Suhashini,

    You can use the same approach from the provided online demo and set a tooltip for the ActiveRegion property of each legend item. For example:
    C#:
    protected void RadChart1_BeforeLayout(object sender, EventArgs e)
    {
        RadChart1.Legend.Items[0].ActiveRegion.Tooltip = "Tooltip for " + RadChart1.Legend.Items[0].Name;
        RadChart1.Legend.Items[1].ActiveRegion.Tooltip = "Tooltip for " + RadChart1.Legend.Items[1].Name;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //Set the TooltipZondeID on the server because the ClientID of the HTML element is needed
            RadToolTipManager1.ToolTipZoneID = RadChart1.ClientID;
            // Populate the chart
            DataTable tbl = new DataTable();
            DataColumn col = new DataColumn("Temp");
            col.DataType = typeof(int);
            tbl.Columns.Add(col);
            col = new DataColumn("Temp2");
            col.DataType = typeof(int);
            tbl.Columns.Add(col);
            col = new DataColumn("Measurement");
            col.DataType = typeof(string);
            tbl.Columns.Add(col);
     
            int size = 20;
            int maxLen = size.ToString().Length;
            Random r = new Random();
            for (int i = 1; i <= size; i++)
            {
                tbl.Rows.Add(new object[] {r.Next(40), r.Next(40) + 10, "Measurement " + i.ToString("D" + maxLen) });
            }
     
            RadChart1.DataSource = tbl;
            RadChart1.DataBind();
        }
    }
    protected void RadChart1_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
    {
        if (e.SeriesItem.YValue > 30)
        {
            e.SeriesItem.ActiveRegion.Tooltip = "Attention! Temperature too high! " + '\n';
        }
        else if (e.SeriesItem.YValue < 10)
        {
            e.SeriesItem.ActiveRegion.Tooltip = "Attention! Temperature too low! " + '\n';
        }
        e.SeriesItem.ActiveRegion.Tooltip += ((DataRowView)e.DataItem)["Measurement"].ToString() + ": Temperature: " + e.SeriesItem.YValue;
    }

    ASPX:
    <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true" OnItemDataBound="RadChart1_ItemDataBound"
            Skin="Vista" Width="600px" OnBeforeLayout="RadChart1_BeforeLayout">
            <ChartTitle TextBlock-Text="Temperature">
            </ChartTitle>
            <Series>
                <telerik:ChartSeries DataYColumn="Temp" Name="Series 1" Type="Line">
                    <Appearance>
                        <TextAppearance TextProperties-Font="Arial, 8.25pt">
                        </TextAppearance>
                        <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki" Dimensions-AutoSize="false"
                            Dimensions-Height="12px" Dimensions-Width="12px">
                            <FillStyle MainColor="186, 207, 141" FillType="solid">
                            </FillStyle>
                        </PointMark>
                        <LineSeriesAppearance Width="5"></LineSeriesAppearance>
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries DataYColumn="Temp2" Name="Series 2" Type="Line">
                    <Appearance>
                        <TextAppearance TextProperties-Font="Arial, 8.25pt">
                        </TextAppearance>
                        <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki" Dimensions-AutoSize="false"
                            Dimensions-Height="12px" Dimensions-Width="12px">
                            <FillStyle MainColor="186, 207, 141" FillType="solid">
                            </FillStyle>
                        </PointMark>
                        <LineSeriesAppearance Width="5"></LineSeriesAppearance>
                    </Appearance>
                </telerik:ChartSeries>
            </Series>
            <PlotArea>
                <XAxis DataLabelsColumn="Measurement">
                    <Appearance>
                        <TextAppearance TextProperties-Font="Arial, 8.25pt, style=Bold">
                        </TextAppearance>
                        <LabelAppearance RotationAngle="30">
                        </LabelAppearance>
                    </Appearance>
                </XAxis>
                <YAxis AxisMode="Extended">
                    <Appearance>
                        <TextAppearance TextProperties-Font="Arial, 8.25pt, style=Bold">
                        </TextAppearance>
                    </Appearance>
                </YAxis>
            </PlotArea>
            <Legend>
            </Legend>
        </telerik:RadChart>
          
     <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Telerik"
         Width="200px" Animation="Slide" Position="TopCenter" EnableShadow="true" AutoTooltipify="true">
     </telerik:RadToolTipManager>


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top