How to categorize data in chart

[Prashant]

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

[Todor]

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

[Prashant]

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

[Todor]

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