Vertical scroll for bar chart with fixed x-axis

8 posts, 0 answers
  1. rajmohan
    rajmohan avatar
    1 posts
    Member since:
    Jul 2017

    Posted 29 Aug 2017 Link to this post

    Hello Kendo Team,

    How do we add/enable vertical scroll to the right of the bar chart to scroll through more items in the data source.

    Consider a scenario where there are 100 items to be displayed in the bar chart and bar chart is designed to display the items in the paginated fashion of 10 items in each page,

    1.Bar chart will display 10 items in a given view

    2.When user pans/mouse scroll the bar chart will display the next set of items in the given ahead

    3. Now, there is no visual clue for the user that the bar chart can be scrolled/panned to view more items. Please suggest a way/workaround to include a vertical scrollbar which will allow user to scroll through the entire bar chart items having the x-axis anchored at the bottom.

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 30 Aug 2017 Link to this post

    Hi Rajmohan,

    If you wish to have a visible scroll, perhaps the Stock Chart with a navigator is a more suitable choice. Have a look at the official demo and let me know what you think.

    Here is the same demo only with column series:

    http://dojo.telerik.com/@bubblemaster/ufeNiD

    Alternatively, if you prefer to stay with the Bar Chart, you could use the example for custom zoom and pan of Bar Charts and add a Kendo UI Slider and its change event to serve as the scrollbar(Kendo UI does not have a Scrollbar widget, we use the native browser ones):

    http://dojo.telerik.com/@bubblemaster/UjuSA

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Lee
    Lee avatar
    78 posts
    Member since:
    May 2019

    Posted 08 Oct 2019 in reply to Alex Hajigeorgieva Link to this post

    I tried going to http://dojo.telerik.com/@bubblemaster/ufeNiD as you suggest in your reply but it is blocked by CORS policy from origin runner.telerik.io. Could you post instructions on how to add the vertical scroll bar to the bar chart?

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 10 Oct 2019 Link to this post

    Hi, Lee,

    Apologies for that, it was due to the relatively new https hosted Dojo and the resource being requested with http in the Dojo. Here is the updated Dojo where I replaced the http links to https and it now works as expected:

    https://dojo.telerik.com/@bubblemaster/uquGafuy

    Let me know in case you have further questions.

    Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. jersey
    jersey avatar
    2 posts
    Member since:
    Sep 2020

    Posted 20 Sep in reply to Alex Hajigeorgieva Link to this post

    hi may i request a suggestion regarding my concern

     

    i am creating a bar chart which might include bulk data like 20-30 rows or more. I want my chart to have a scrollbar and maintain the size of the bar it will generate. i want to have 10 bars to display on every page if possible or an scrollbar. 

  6. jersey
    jersey avatar
    2 posts
    Member since:
    Sep 2020

    Posted 21 Sep in reply to rajmohan Link to this post

    hi do you already have the solution for this ? this is also my problem 

     

  7. Lee
    Lee avatar
    78 posts
    Member since:
    May 2019

    Posted 21 Sep in reply to jersey Link to this post

    I never got a solution for this unfortunately. I keep hoping Telerik will come up with one.
  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 22 Sep Link to this post

    Hi, Jersey and Lee,

    We have suggested a vertical option using the same approach in one of our Feature Requests:

    Vote for the feature here:

    https://feedback.telerik.com/kendo-jquery-ui/1433345-add-vertical-scrollbar-to-bar-chart

    Vertical scrollbar example:

    https://dojo.telerik.com/EgoTOmoS/3

    You may notice that the feature request is marked as completed. This is because a solution was provided and there were no further responses from the original poster or anyone else. 

    If you feel that the solution is somehow lacking, please comment on the item so we can revise it.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top