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

SLC: show 3rd value when hovering points

1 Answer 98 Views

Chart (HTML5)

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

Zane asked on 21 Feb 2017, 11:01 PM

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>

1 Answer, 1 is accepted

Accepted

answered on 23 Feb 2017, 09:17 PM

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