SLC: show 3rd value when hovering points

2 posts, 0 answers
  1. Zane
    Zane avatar
    2 posts
    Member since:
    Aug 2016

    Posted 21 Feb 2017 Link to this post

    I am using a Scatter Line Chart to graph XY values from a data set.  These XY points taken from the data set also have a date associated with them.  My code pulls 2 points from the dataset and graphs them to show net XY movement over time.  When a user hovers a data point on the graph to display the XY values, I would also like the tooltip to say what date (or essentially any 'Z' value) is associated with that point.  This Z value is in the data set which I am graphing, but I do not know any way to clearly display the date information so the user knows the point's associated date.  I tried adding a {2} to DataFormatString below, but obviously without a 3rd (DataFieldZ?) Specified, it has nothing to link to.

     

    <telerik:RadHtmlChart runat="server" ID="SLCPositionalMultiDevice" Width="1100px" Height="650px" Visible="false">
    <PlotArea>
             <Series>
                 <telerik:ScatterLineSeries Name="0" DataFieldX="x" DataFieldY="y">
                     <TooltipsAppearance Color="White" DataFormatString="{0}, {1}, {2}"></TooltipsAppearance>
                     <LabelsAppearance Visible="false">
                     </LabelsAppearance>
                 </telerik:ScatterLineSeries>
             </Series>
             <XAxis>
                 <LabelsAppearance DataFormatString="{0}"></LabelsAppearance>
                 <MajorGridLines Width="1"></MajorGridLines>
                 <MinorGridLines Visible="false"></MinorGridLines>
             </XAxis>
             <YAxis >
                 <LabelsAppearance DataFormatString="{0}mm"></LabelsAppearance>
                 <MajorGridLines Width="1"></MajorGridLines>
                 <MinorGridLines Visible="false"></MinorGridLines>
             </YAxis>
         </PlotArea>
    </telerik:RadHtmlChart>
  2. Zane
    Zane avatar
    2 posts
    Member since:
    Aug 2016

    Posted 23 Feb 2017 in reply to Zane Link to this post

    I found the answer to my own question after about a week and a half and will post it in case someone else runs across this post.  This code displays your x y and z values in tooltip and you z values in labels.  In my case the z values were dates.

    <telerik:ScatterLineSeries Name="0" DataFieldX="x" DataFieldY="y">
      <TooltipsAppearance>
       <ClientTemplate>
          (#=dataItem.x#, 
          #=dataItem.y#) <br />
          #= kendo.format(\'{0:g}\', dataItem.NameOfThirdColumn)#
        </ClientTemplate>
     </TooltipsAppearance>
        <LabelsAppearance Visible="true">
         <ClientTemplate>
           #= kendo.format(\'{0:g}\', dataItem.NameOfThirdColumn)#
         </ClientTemplate>
       </LabelsAppearance>
    </telerik:ScatterLineSeries>

    These two links talk about it.  
    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/format-numbers

Back to Top