kendoSparkline

10 posts, 0 answers
  1. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 29 Jun 2015 Link to this post

    Hello,

    We are trying to create the charts for below attached images(1,2 and 3) using kendoSparkline.

    http://dojo.telerik.com/@devendra/oPOvI ] this is the sample one we created, but not close to what we want.

    Can you please suggest on how we could develop charts which are attached herewith.

    Do you know if we can increase the width of the column chart?

     

    Best Regards,

    Devendra

  2. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 01 Jul 2015 in reply to Devendra Link to this post

    I would like to add the text as well for these images. Please see the updated image attached here.
  3. Kendo UI is VS 2017 Ready
  4. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 01 Jul 2015 in reply to Devendra Link to this post

    Forgot to update the image.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 02 Jul 2015 Link to this post

    Hello,

    Please accept my apologies for the delayed response.

    I'll start with the bar charts on the left. You can adjust their size freely using the chartArea.width setting. In addition, you can remove the empty space to the sides (gap):
        seriesDefaults: {
            gap: 0
        },
        chartArea: {
            width: 20
        }

    This is the updated snippet.

    The chart to the right should be possible to implement using plot bands and a line series showing only markers.
    Also demonstrated in the snippet above.

    Additional text should probably placed outside the chart and positioned using CSS.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 02 Jul 2015 in reply to T. Tsonev Link to this post

    No problem :) . this is great, thank you for your help. Could you provide little bit more about "Additional

    text should probably placed outside the chart and positioned using CSS" and when i click on that can i show one more chart as popup?

    It would be nice if could give us some more insights on how to implement this.

    Best Regards,

    Devendra

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 06 Jul 2015 Link to this post

    Hi,

    My idea was to use plain HTML elements and position them using suitable markup and styles.
    This should give you maximum control as opposed to trying to embed this content in the chart.

    I've updated the snippet to illustrate, but it's a generic concept really. Use whatever styling fits your scenario.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 06 Jul 2015 in reply to T. Tsonev Link to this post

    Thanks for the response. 

    I made the few changes to my snippet.  Please see below one

    http://dojo.telerik.com/@devendra/isiQO/24.

     When you click on one of the title it opens the popup, currently i have hard coded the values, but i would like to make it dynamically. Example, i click Title1, i need to populate the popups with different data. Can you please provide me an example snippet regarding this. 

    Best Regards,

    Devendra

     

  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 08 Jul 2015 Link to this post

    Hi,

    The chart will provide context for the seriesClick handler, but it can't do this automatically for external elements such as the title.

    My recommendation is to attach data attributes to the title elements and use those to identify them. For example:
    <td onclick="Popup(this)" data-id="1"><h3>Title1</h3></td>

    function Popup(e) {
          var id = $(e).data("id");
          ...


    Does this make sense?

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 08 Jul 2015 in reply to T. Tsonev Link to this post

    Could you please provide more insights on if i am getting data from a web service because here i might be having different set of data, how i can add the data for data attributes like you mentioned above?

    Can you please provide a sample example here which i can use for my popups.

     

    Best Regards,

    Devendra

     

  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 Jul 2015 Link to this post

    Hello,

    Please, refer to the Binding to Remote Data example for an illustration on how to populate the sparklines with remote data.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready