Sparkline vs. Chart

7 posts, 0 answers
  1. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 01 Apr 2014 Link to this post

    I've been trying to use chart and sparkline.

    I have a few questions:
    1) I've read in the forum that there should be no difference between the two except visual differences (http://www.telerik.com/forums/sparkline-vs-chart-efficiency-).
    This doesn't seem to be the case: http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview
    I've created a chart (http://plnkr.co/edit/12gvS94rPTrR7t35wCCH?p=preview) and then a sparkLine (http://plnkr.co/edit/6LRb16QIgUuoWAbxLuyq?p=preview) with the same configuration (same datasource and same options file) and it gives an error when creating the sparkline but not when creating the chart.
    2) How can I get the "sparkLine" effect in a "chart", or if it's easier, how to make the "sparkLine" look as good as a chart?
    3) I've read these posts:
    http://www.telerik.com/forums/get-chart-coordinates-for-mouse-position
    http://www.telerik.com/forums/mouse-position---data---position-are-not-the-same-values
    They show how to get mouse position in Silverlight and WPF.
    How can I get the mouse coordinates using javascript/jQuery? 

    Thanks

     

  2. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 01 Apr 2014 in reply to OMER Link to this post

    A note about number 3: I know how to track mouse position.  What I need is the function that converts the mouse location to the x and y values in the chart. Also, if there's a "vice versa" method (get mouse location by x and y values) that would be very helpful.
  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 02 Apr 2014 Link to this post

    Hello,

    The Sparkline and the Chart indeed share identical implementation. The differences are mostly contained to default values for various options.
    The reason that you don't see the sparkline in your sample is that you have a title. It moves the series out of the view. If you remove the title and the legend you'll get:
    http://plnkr.co/edit/OPLrC9FEFDQ2QRj3Mulz?p=preview

    I don't quite understand the second question. A visual mock-up or more details will be greatly appreciated.

    There's no method that will map screen coordinates to chart coordinates. This is something that we're looking to address in future releases.
    Please, feel free to cast your vote for this feature on our feedback portal.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 03 Apr 2014 in reply to T. Tsonev Link to this post

    Hi,
    Thanks.
    About 1 and 2:
    Please take a look at the sparkLine example.  It looks very differently than the chart example.
    Where do the differences stem from?
    About the 3 issue:
    In the links I've given here, these functions are mentioned by a Telerik representative.  How can they not exist?
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 04 Apr 2014 Link to this post

    Hello,

    The sparkline is designed to be fitted inside other content, typically text. To achieve this goal it is rendered as an inline-block element (span).
    It also hides everything, but the actual series. It also provides root-level data and type options to allow easier initialization with a single series.
     
    Because the sparkline is technically inheriting the chart, you can enable any chart option. Many of these options will make it unusable in its typical use case - for inline content.
    To be more precise, these are the options overridden by the sparkline:
            options: {
                chartArea: {
                    margin: 2
                },
                axisDefaults: {
                    visible: false,
                    majorGridLines: {
                        visible: false
                    },
                    valueAxis: {
                        narrowRange: true
                    }
                },
                seriesDefaults: {
                    type: "line",
                    area: {
                        line: {
                            width: 0.5
                        }
                    },
                    bar: {
                        stack: true
                    },
                    padding: 2,
                    width: 0.5,
                    overlay: {
                        gradient: null
                    },
                    highlight: {
                        visible: false
                    },
                    border: {
                        width: 0
                    },
                    markers: {
                        size: 2,
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    shared: true
                },
                categoryAxis: {
                    crosshair: {
                        visible: true,
                        tooltip: {
                            visible: false
                        }
                    }
                },
                legend: {
                    visible: false
                },
                transitions: false,
                pointWidth: 5
            }

     
    The forum threads refer to the Silverlight/WPF charts which do not share the same codebase as our Kendo UI offerings.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 09 Apr 2014 in reply to T. Tsonev Link to this post

    It's much clearer now. Could be useful to put these things in the documentation and maybe add the "missing" functions that exist in the Silverlight/WPF to the "regular" JS kendo.
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 10 Apr 2014 Link to this post

    Hi,

    Please, submit any requests for missing features to our feedback portal.

    We'll update the Sparkline - Overview help topic to highlight the differences with the Chart.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
Kendo UI is VS 2017 Ready