Add icons on chart surface

9 posts, 1 answers
  1. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2013 Link to this post

    How would I add icons in a horizontal row on a linear chart?  As I figure it, I would need to do two things:
    1. First, I would need to "extend" the chart's vertical "majorGridLines" so that there was room to add a row of icons/images without overlapping the data.
    2. Second, I would need a method to add an image for each x-axis point and be able to specify the y-location (position) at which it was drawn.  Ideally, the the image's file name would come from the data set.
    Is this what chart annotations are intended to handle?  I have not been able to find any information on annotations, other than they were introduced in 2013 Q2.

    I have attached an image of what I am describing. 

    Thank you for your assistance.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1443 posts

    Posted 29 Oct 2013 Link to this post

    Hi Robert,

    I am afraid that this behavior is not supported out of the box, however you can achieve similar results by positioning floating div elements over the Chart's surface. The chart annotation (notes) currently support only text, as seen in this demo. Adding images is on the way and will be included in further releases, although I cannot provide you an exact date at this point. 

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 29 Oct 2013 Link to this post

    Thanks.  Two follow-up questions:

    First, you said "... you can achieve similar results by positioning floating div elements over the Chart's surface."

    Is there a way to identify the horizontal coordinate of major gridlines or series values; and to identify the vertical coordinate of data values?

    Second, can you address the question of extending the chart surface (and major grid lines) vertically without expanding the chart itself (to leave more "headroom" on the top of the chart, but still below the series name).

    Thanks again.

     - Robert
  4. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1443 posts

    Posted 30 Oct 2013 Link to this post

    Hello again,

    Extending the chart surface is also not supported out of the box, however it could be done in the following manner:
    • Let's say you are expecting values between 0 and 10
    • Set the valueAxis' max to 30 and use a label template that does not show any label if the value is bigger than 10
    • You can get the points' coordinates by using the Charts _plotArea internal method
    Here is a small example of the above - I hope it helps.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kiran
    Kiran avatar
    2 posts
    Member since:
    Sep 2010

    Posted 13 Jun 2014 Link to this post

    We have same kind of requirement for our project to add custom image at particular dates, along with providing plotBands color with from and to date range.

    We are using Kendo Stock Chart. Refer below image for the output we are trying to achieve. 

    1. Issue with plotBands - It is not considering date range, instead it is considering number value. How to achieve plot band color with date range?

    2. How to add custom icon for few dates. 

     

    Let me know how best we use kendo properties to do so. I can see this post is open since 2013, it there any other version update which can handle injecting image?
  6. Kiran
    Kiran avatar
    2 posts
    Member since:
    Sep 2010

    Posted 13 Jun 2014 in reply to Kiran Link to this post

    Prototype attached.
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1443 posts

    Posted 17 Jun 2014 Link to this post

    Hello Kiran,

    I am afraid that this scenario is unsupported and implementing it would require a custom solution that is beyond the scope of our support services. The icon's position could be determined after the Chart is fully drawn, so I would recommend using the Chart's DataBound event as shown in this example.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. andywalkers
    andywalkers avatar
    2 posts
    Member since:
    May 2014

    Posted 06 Nov 2014 in reply to Alexander Popov Link to this post

    Hi,

    Do you have any updates on adding custom icons on kendo chart?
    We have a requirement similar to what Robert has asked for.

    Thanks in advance.
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Nov 2014 Link to this post

    Hi Andy,

    Adding custom icons to Kendo UI Chart is still not supported out-of-the-box - as a workaround you can use the approach suggested by my colleague Alexander.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top