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

Line Series formatting questions

1 Answer 205 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Lane
Top achievements
Rank 1
Lane asked on 09 Jan 2014, 12:34 AM
  1. Is it possible when hovering over a line series for a small marker or indicator to appear on the line at the hover point?  (Something similar to the little dot at https://www.google.com/finance?q=NASDAQ:AAPL
  2. If I want to format a tooltip using ClientTemplate, do I have to be using KendoUI per this article?  I want to display both the XAxis and YAxis values in the tooltip.  The XAxis value comes from a DateTime column in my datasource, and the YAxis is a decimal that I want to display in #,# format (with thousands separator and no decimal places).  When I set it in the ClientTemplate, I'm unable to format it.  I'm not using KendoUI.  Is there any other option?  Can I do it server-side?

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 13 Jan 2014, 03:27 PM
Hi Lane,

Currently there aren't any properties that control the highlighting effect of the hovered series. Nevertheless such a feature request has already been logged in our feedback portal here and you can monitor, comment or raise its priority by voting on it. For the time being you can use the provided example below to display marker of the series items only when they are hovered:
JavaScript:
<script>
    function pageLoad() {
        var chart = $find("<%=RadHtmlChart1.ClientID%>");
        chart._chartObject.options.series[0].highlight = {
            markers: {
                visible: true
            }
        }
        chart.repaint();
    }
</script>

ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <PlotArea>
        <Series>
            <telerik:LineSeries>
                <MarkersAppearance Visible="false" />
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="20" />
                    <telerik:CategorySeriesItem Y="15" />
                </SeriesItems>
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>


As for the formatting of dates and number in a template you must use kendo.format() method. The reason why the kendo object is used there is because the RadHtmlChart control is actually an ASP.NET control wrapper around our Kendo UI Chart. Please find below an example on how to use that method to format numbers and dates:
<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
    <LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
    </LabelsAppearance>
    <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}">
        <ClientTemplate>
            x value: #=kendo.format(\'{0:yyyy-MM}\',value.x)# <br/>
            y value: #=kendo.format(\'{0:N0}\', value.y)#
        </ClientTemplate>
    </TooltipsAppearance>
</telerik:ScatterLineSeries>

You can also find the full VS example in the attached archive. You may also find useful Formatting Numbers and Formatting Dates help articles.

Regards,
Danail Vasilev
Telerik
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 the blog feed now.
Tags
Chart (HTML5)
Asked by
Lane
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or