How to categorize data in chart

4 posts, 1 answers
  1. Prashant
    Prashant avatar
    8 posts
    Member since:
    Sep 2015

    Posted 05 Feb Link to this post

    Hi,

    One thing which i need urgently.

    * I want to categorize data in 7 week days which must start at "Sunday" and end at "Saturday" on DateTimeContinuous axis and distribute accordingly. I am getting date from API in MM/dd/yy format which i am converting to EEEE format to convert to days of week. But, my horizontal axis always start with the corresponding day of very first date received from API. Is there a way to set "Sunday" as Minimum and "Saturday" as maximum on DateTimeContinuous X-axis. Please refer to the attached image for more clarification of my requirement.

     

    Thanks,

    Prashant

  2. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 09 Feb Link to this post

    Hello Prashant,

    Thank you for your question.

    The DateTimeContinuousAxis has minimum and maximum properties that can be set in order to limit the visible data. Since you want to distribute your data for a single week, we can assume that you data actually fits within a week and we can use a random item to determine which week to show. Here's how to get the data from the first item and set limits for the axis:

    Calendar minDate = this.getData().get(0).date;
    minDate.set(Calendar.DAY_OF_WEEK, Calendar.SUNDAY);
    axis.setMinimum(minDate);
    Calendar maxDate = this.getData().get(0).date;
    maxDate.set(Calendar.DAY_OF_WEEK, Calendar.SATURDAY);
    axis.setMaximum(maxDate);

    In this sample, getData returns a list of your data items and date is property that returns Calendar object.

    Regards,
    Todor
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Prashant
    Prashant avatar
    8 posts
    Member since:
    Sep 2015

    Posted 10 Feb Link to this post

    Hi Todor,

    Thanks for answering . Sorry but i have one more thing to ask. 

    I am using PAN and ZOOM behavior on X axis only. I have set initial zoom to the chart to show just 10 data points and rest chart is scrollable. But, user can Zoom in and Zoom out and hence labels create multiple lines while Zooming out as shown in the attached image. Is there any way to set MINIMUM ZOOM so that user won't be able to zoom out beyond a limit? 

     Thanks,

    Prashant

  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 15 Feb Link to this post

    Hello Prashant,

    Thank you for getting back to us.

    While there is no method that sets a minimum zoom, you can use the setZoomMode method to achieve your desired scenario.
    Just set the zoom mode to none after you set up your pan zoom behavior so that you don't let user change the zoom level set by you:


    panZoomBehavior.setZoomToChart(3, 1, 0, 0);
    panZoomBehavior.setZoomMode(ChartPanZoomMode.NONE);

    I hope this information helps.

    Regards,
    Todor
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner