amCharts Minimal zoom range (minimal period selector range) - javascript

I try to use amCharts. I have a chart that represent dayly data. I can't make so user wouldn't be able to choose period less than 5 days (i dont want send 5 days points to chart)
Also i can attach changed event to period selector, but chart zooming and chart scroll bar have no any events and methods i could use.
I need to do so user will see message "please select range that is more than 5 days" when he tries to scroll, select period and zoom chart. And set chart zoom to 5DD.
Also i mentioned that period selector changed event, fire every time when blur event fired on inputs, i think it's not right behavior. It should fire when date changed, yep?
chart.periodSelector.addListener('changed', function(){
alert('changed');
});
I have date picker that attached to period selector inputs (it don't permit user to select less than 5 days range), but i can only update my datepicker ranges only if user input date, i can't to do anything if he zoomed, scrolled chart. I don't see any events in your API for that.
Thanks for your help! Will wait any advice.

Use zoomed event instead.
chart.addListener('zoomed', function (event) {
// Your code
}
And now, to get the selector's start and end date, use this:
event.startDate
event.endDate

Related

Fullcalendar: Events with open and closed day background/marker

I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.
I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object

AmStockChart period selection changes to YTD (AmCharts)

I am using AmStockChart. The requirement here was to update the chart data on period selection. This works fine as we receive a period selection event and when this event occurs we update the chart with latest data. The period selector I have configured is 1M, 3M, 6M, 1Y, YTD and 3Y. The data I have is of 8 months.
The problem I am facing is when I change the period selector to 1Y, after updating the data it falls back to YTD i.e. it selects YTD again. However this is not happening when I select 1M, 3M and 6M, in these cases the selection does not changes to YTD.
Is it happening because I have only 8 months data and when I select 1Y, since there is only 8 months data it selects YTD? Is it the desired behavior?
Thanks in advance.

Fullcalendar eventReceive disable time slot

I would like to disabled slot time on drag and drop event when the slot has been already taken. How could I make it work?
I'm using Fulcalendar Event javascript and my event duration is only 15 minutes like this:
I checked the doc but didn't found how. I think I have to compare the title event already taken to blank in jQuery before accept the new drag and drop event if it's return true.
You can use the eventOverlap option in fullCalendar, like this:
eventOverlap: false
This will mean that the UI will prevent events from being dragged or resized such that they fully or partially take up space occupied by an existing event.
See https://fullcalendar.io/docs/event_ui/eventOverlap/ for more details.

jQuery calendar match date from previous input

So what I am trying to accomplish is what most Hotel or Airport sites have in general, after you've chosen a date for your arrival when clicking on the next calendar it automatically updates the calendar dates to the same month in which you chose your arrival.
See: http://hotelsaxchicago.com
I currently have jQuery UI and it's calendar plugin for a casino/hotel site: http://staging.comanchenationcasinos.com
Is there away to do something similar on here? How can I detect what's already in the input field without actually clicking the submit button.
At the same time, how can I trigger the calendar if someone clicks on the icon instead?
Thanks ahead of time.
What I usually do for the calendar link next to the input is something like
$('body').on('click', '.calendar_icon', function(){
$(this).prev('input[type="text"]').focus();
return false;
});
That will drop the focus onto the text input sitting previously in the markup.
Regarding the date resetting, try something like this:
Assuming you have the first input with the id of first_date and the second as second_date...
$('body').on('change', '#first_date', function(){
var this_date = $(this).val();
$('#second_date').datepicker("setDate", new Date(this_date) );
});
Worth noting, you could also attach the two date pickers with data-next-datepicker="#something" to make it really specific if you'd rather not use #second_date. I'd go that route if you had a series of dates on the page.

DaterangePicker and second click on same item

I am using Bootstrap Date Range Picker and I am trying to enable a second click on the same date range.
Ex: User clicks on "today" and gets results, then clicks again 5 minutes after and gets the updated results.
Everything works fine on the first click but due to line 298 .on('click', 'li', $.proxy(this.clickRange, this)) the click gets unbound on that item.
I looked everywhere to try and correct it to no avail.
The callback is only fired when a new date range is selected.
If you'd like to change the behavior, this is the line to change.

Categories