plot lines or bands on scatter charts?

10 posts, 1 answers
  1. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 28 Nov 2014 Link to this post

    I would like to draw a line parallel to the X axis on a scatter chart at the average of the Y values.  I see plot bands listed for other types of charts, but nothing for scatter charts.  For run, I tried adding a plotBands config to the yAxis element of my scatterline chart, but nothing shows up.

    Is there a plot line feature available for scatter charts?

    I didn't see anything in the documentation:
    http://demos.telerik.com/kendo-ui/scatter-charts/index
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 Dec 2014 Link to this post

    Hi John,

    I tested the plotBands feature with Scatter Chart and everything is working as expected on my side. Could you please take a look at this dojo and let me know if I am missing something?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 02 Dec 2014 in reply to Iliana Nikolova Link to this post

    The example you gave works, thank you!

    I think my problem was that if you don't specify the color, or you make the value range too narrow, nothing shows up.  I wanted a line and I wanted it to use an appropriate color to the theme (iOS or Android).

    I was able to adjust my code to approximate a line by dividing the maximum value plotted by the chart height.  Unfortunately, this doesn't work completely because the Y axis extents adjust to the next round label value.  Is there a more elegant way to get a "line"?

    Here's one of the charts I draw (the Y values vary by several orders of magnitude):
    http://dojo.telerik.com/iFuWe
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Dec 2014 Link to this post

    Hi John,

    In my opinion the used approach with plotBands is OK. Could you please elaborate a bit more on the exact outcome you would like to achieve? 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 03 Dec 2014 in reply to Iliana Nikolova Link to this post

    I would like to draw a line at the average Y value (see the attachment).

    The plot band feature marks out a region of Y values, but I want to draw a line of the same width as the primary "scatterline" line.  As you can see in the image, the line is fuzzy not precise like the graph line.  Also, its width varies because I have to estimate the Y value range that corresponds to the graphed thickness (and don't have the dimensions of the padding around the graph, etc).
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 Dec 2014 Link to this post

    Hi John,

    I was thinking on this case and would suggest to add a second scatterLine series with equal values and hide its markers. For your convenience I prepared a basic example - please check it and let me know if this fits the current requirements.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 05 Dec 2014 in reply to Iliana Nikolova Link to this post

    That is an excellent suggestion, and I have adopted it.

    It's not perfect because it doesn't go all the way across the graph (since the right edge is dynamic), but it's good enough for my purposes.  (See attached file.)
  9. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 05 Dec 2014 Link to this post

    Having trouble attaching files, here's another try...
  10. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 Dec 2014 Link to this post

    Hi John,

    Please check this example - it demonstrates how to achieve the illustrated outcome using the approach from my previous post.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. John
    John avatar
    15 posts
    Member since:
    Oct 2014

    Posted 05 Dec 2014 in reply to Iliana Nikolova Link to this post

    Setting the X max value works, although it does mean I need to reproduce some of the logic of the normal axis scaling, since my X values also vary widely.

    This is a sufficient work-around for now.  Thanks for all the help.
Back to Top
Kendo UI is VS 2017 Ready