How to display vertical line for sparkline's tooltip?

5 posts, 1 answers
  1. Troy S.
    Troy S. avatar
    5 posts
    Member since:
    Dec 2012

    Posted 17 Feb 2014 Link to this post

    We are using Tererik's RadHtmlChart in sparkline layout mode with a single line series.  I am trying to figure out how to display the vertical line in the tooltip as demonstrated on the MEAN TEMP chart via https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/sparklinechart/defaultcs.aspx.  I need to accomplish this via server-side C#, not ASCX markup (I am configuring all 14 sparkline controls on our web page via a single C# method to minimize the amount of duplicate ASCX code).  I suspect the vertical line may be controlled by the unusual background settings within the sparklines-wrapper CSS style but I can find no documentation on this specific feature to help guide me.

    Thanks for your time and attention.

    Troy

    My ASCX:
                        <div class="sparklineWrapper">
                            <telerik:RadHtmlChart ID="RadHtmlChart_Sales" runat="server" Layout="Sparkline" class="sparkline" />
                        </div>

    My C#:
            protected void ConfigureSparklineControl(string id)
            {
                RadHtmlChart sparkline = this.FindControl(id) as RadHtmlChart;

                // turn off transitions so there's no flicker when the graph is repainted with new data
                sparkline.Transitions = false;

                // hide the Legend area to prevent displaying the clickable 1-pixel link
                sparkline.Legend.Appearance.Visible = false;

                // ... other configuration code here
            }


  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 20 Feb 2014 Link to this post

    Hi Troy,

    I am sorry to say that the crosshair functionality is exposed only by the x-axis of the sparklines and not by the other series types. Nevertheless I have logged this idea in our feedback portal here, so that you can monitor, comment and raise its priority by voting on it.

    I have also updated your Telerik points for sharing your ideas with us.

    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Troy S.
    Troy S. avatar
    5 posts
    Member since:
    Dec 2012

    Posted 20 Feb 2014 in reply to Danail Vasilev Link to this post

    Danail,

    Thanks for taking the time to respond but I don't understand your answer.  I see the vertical line displayed in the tooltip on the Mean Temp sparkline graph on the demo page I previously mentioned.  How do I achieve that?  I'm not asking if a specific feature is possible, I'm asking how you guys achieved that functionality in one of your demos so I can duplicate it.  In other words, what portions of your HTML/CSS/C# code causes the vertical line to be displayed in the tooltip?  I can find no documentation for it.

    Thanks.

    Troy
  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 24 Feb 2014 Link to this post

    Hi Troy,

    Thank you for the additional clarification.

    The x-axis cross hair is actually an SVG Path element (you can see that by inspecting this element), that is changing its position on the client with JavaScript. I have created a short video in order to illustrate how to find that element and change its positions.

    Regarding our documentation resources, their purpose is to provide how to achieve a particular functionality and not how this functionality is implemented. If you want, however, to see how a particular functionality is implemented or modify an existing one you can refer to the source code of Telerik UI for ASP.NET AJAX, which however, requires a license purchase.

    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  6. Troy S.
    Troy S. avatar
    5 posts
    Member since:
    Dec 2012

    Posted 04 Mar 2014 in reply to Danail Vasilev Link to this post

    Danail,

    Thanks for your time and explanation and for sending me the video.  I now have a much better understanding of the intricacies of the sparkline's vertical line.

    Take care.

    Troy
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017