Show tool tip on mouseover on bars

Thread is closed for posting
3 posts, 1 answers
  1. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 04 Oct 2011 Link to this post

    Hi,
    I'm using rachart of bar type inside the "Radgrid" in my application.
    I'm having 3 serieses in chart.
    I want to show the tooltip on mouse over for bars.
    I tried as follows
    I was tried to handle the code in chart itemdatabound event but this event itself notfiring.

     

     

     

     

    here is my aspx page
    <telerik:RadGrid ID="dispatcherGrd" runat="server" CssClass="gridView1" GridLines="None"
                                               AutoGenerateColumns="false" OnItemDataBound="dispatcherGrd_ItemDataBound" ShowHeader="false"
                                               Width="99%" Height="102px" BorderColor="White" BorderWidth="0" OnPreRender="dispatcherGrd_PreRender"
                                               OnItemCommand="dispatcherGrd_ItemCommand">
                                               <ClientSettings>
                                                   <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" />
                                               </ClientSettings>
                                               <AlternatingItemStyle BackColor="White" />
                                               <HeaderStyle HorizontalAlign="Left" />
                                               <ItemStyle Font-Names="Arial" Font-Size="12px" ForeColor="#000000"/>
                                               <MasterTableView>
                                                   <Columns>
                                                       <telerik:GridBoundColumn DataField="DispatcherName" HeaderStyle-Width="150px" HeaderText="Dispatcher Name">
                                                       </telerik:GridBoundColumn>
                                                       <telerik:GridBoundColumn DataField="RegularCount" HeaderStyle-Width="90px" HeaderText="Regular">
                                                       </telerik:GridBoundColumn>
                                                       <telerik:GridBoundColumn DataField="EmergencyCount" HeaderStyle-Width="90px" HeaderText="Emergency">
                                                       </telerik:GridBoundColumn>
                                                       <telerik:GridBoundColumn DataField="DirectCount" HeaderStyle-Width="90px" HeaderText="Directed">
                                                       </telerik:GridBoundColumn>
                                                       <telerik:GridBoundColumn DataField="TotalCount" HeaderStyle-Width="90px" HeaderText="Total">
                                                       </telerik:GridBoundColumn>
                                                       <telerik:GridTemplateColumn DataField="" UniqueName="chartcolumn">
                                                           <ItemTemplate>
                                                           <telerik:RadChart ID="dispatcherChrt"  runat="server" Width="230px" Style="margin-top: 0px;"                                                      SeriesOrientation="Horizontal" 
                                                                  ChartTitle-Visible="false" OnitemDataBound="dispatcherChrt_ItemDataBound" SkinsOverrideStyles="true" CreateImageMap="false" >
                                                                   <Series>
                                                                       <telerik:ChartSeries Type="StackedBar">
                                                                           <Appearance BarWidthPercent="85" LabelAppearance-Visible="false">
                                                                               <FillStyle FillType="Solid" MainColor="ForestGreen">
                                                                               </FillStyle>
                                                                           </Appearance>
                                                                       </telerik:ChartSeries>
                                                                       <telerik:ChartSeries Type="StackedBar">
                                                                           <Appearance BarWidthPercent="85" LabelAppearance-Visible="false">
                                                                               <FillStyle MainColor="#f2180d" FillType="Solid">
                                                                               </FillStyle>
                                                                           </Appearance>
                                                                       </telerik:ChartSeries>
                                                                   </Series>
                                                                   <PlotArea Appearance-Dimensions-Margins="0,0,0,0" Appearance-Border-Color="White"
                                                                       XAxis-Appearance-MajorGridLines-Visible="false" YAxis-Appearance-MajorGridLines-Visible="false"
                                                                       Appearance-FillStyle-MainColor="White" Appearance-FillStyle-FillType="Solid"
                                                                       Appearance-Border-Width="2" />
                                                                   <Legend Visible="false"></Legend>
                                                               </telerik:RadChart>
                                                           </ItemTemplate>
                                                           </telerik:GridTemplateColumn>
                                                           </Columns></MasterTableView>
                                                           </telerik:RadGrid>

     

    protected void dispatcherChrt_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
       {
           e.ChartSeries[0].ActiveRegion.Tooltip = "state";
           e.ChartSeries[1].ActiveRegion.Tooltip = "Vox";
       }


    but I'm not able to see any result I added tooltipmanager too.
    Please help me How cloud I achieve this.

  2. Answer
    Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 06 Oct 2011 Link to this post

    Hi Ram,

    Try using DataBound insted of ItemDataBound event. ItemDataBound is used for the series items and in your case I see you want to apply the tooltips for each series. Then modify your DataBound handler:
    void dispatcherChrt_DataBound(object sender, EventArgs e)
        {
            dispatcherChrt.Series[0].ActiveRegionToolTip = "state";
            dispatcherChrt.Series[1].ActiveRegionToolTip = "Vox";
        }

    You could also use the ActiveRegionToolTip property and set a value for each series for example like this:
    <Series>
                                    <telerik:ChartSeries Type="StackedBar" ActiveRegionToolTip="state">
                                        <Appearance BarWidthPercent="85" LabelAppearance-Visible="false">
                                            <FillStyle FillType="Solid" MainColor="ForestGreen">
                                            </FillStyle>
                                        </Appearance>
                                    </telerik:ChartSeries>
                                    <telerik:ChartSeries Type="StackedBar" ActiveRegionToolTip="Vox">
                                        <Appearance BarWidthPercent="85" LabelAppearance-Visible="false">
                                            <FillStyle MainColor="#f2180d" FillType="Solid">
                                            </FillStyle>
                                        </Appearance>
                                    </telerik:ChartSeries>
                                </Series>

    Hope that helps.

    Greetings,
    Peshito
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 10 Oct 2011 Link to this post

    Hi
    Thanks very much now its working without need of Databound event.
    I set activeregiontooltip porperty in series of aspx.
    I changed CreateimageMap="false" to true.
    Now its working.
    Thanks for your assistance in solviing the problem.
Back to Top