Data Grouping - Monthly (end-of-month) - highcharts

I'm having a very difficult time trying to get my data to be grouped via month. I've even gone so far as to programmatically filter through my data to return only the last day of the month and calculate the monthly value. I've tried to find a good explanation on the 'dataGrouping' property but have had no luck understanding it nor properly implementing it. Every results returns my series in a daily interval.
My questions are as follows:
Is there a minimum number of data points needed for data grouping to
work?
Under the dataGrouping.units I've tried to use this
documentation but nothing has worked for me - Still results in a
daily interval - Could someone explain this for me?
Any help on this would be GREATLY appreciated.

Are you using HighStock graph?
If yes...
Sure, it takes a lot of data to get grouping. If datagrouping option is enabled, Highstock handle automatically the switch between every grouping mode. So if you don't have a lot of data, it will not work with default settings
So, if you want to group by default, you need to force the grouping.
series:[{
[...]
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month',[1]]]
}
}]
EDIT
Here is a working example demo (fork of a basic highstock demo)
http://jsfiddle.net/NcNvu/
Hope it helps!
Regards

We tried a Hack around this, where we used Highstock's (Splinechart) RangeSelector, Event and DataGrouping. On click of weekly rangeselectorButton we catch this event through setExtremes. Post catching the event approximate it to "sum". If you are using two series than iterate the object. Currently doing it weekly just extend it for Monthly using corresponding UNIT
events: {
setExtremes: function (e) {
if (e.rangeSelectorButton != undefined) {
var triger = e.rangeSelectorButton;
if (triger.type == 'week') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['week', [1]];
});
} else if (triger.type == 'day') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['day', [1]];
});
}
}
}
},

Related

Rails Capybara not detecting vivsiblity of flex item

I am doing display: flex an element on button click and then display: none to the same element after some ajax calls. I am doing the integration testing for the same using Capybara with Selenium driver. The problem is that capybara detects the visibility of the element and sometimes it does not even though the element is visible. I have tried giving different wait values but still it works sometimes and sometimes it does not. Is there anyway I can rectify this? The code is as below:
ele.addEventListener('change', () => {
showSpinner(true);
ajaxCall().then(() => showSpinner(false));
}
showSpinner = (flag) => {
let spinner = document.getElementById('spinner');
if (!spinner) {
return;
} else if (flag) {
spinner.classList.add('show');
} else {
spinner.classList.remove('show');
}
};
.spinner.show {
display: flex;
}
.spinner {
display: none;
// other properties
}
In test file
choose 'radio_button' // if radio button
select 'some text', from: 'dropdown_element' // if dropdown
assert page.has_css?('.spinner', wait: 0)
This works sometimes and sometimes it does not. The element is selected or clicked. That works. But not has_css. Also I tried using assert_css but I am getting error. So how can I write the testcase for the above problem?
I solved the problem as below. I found the answer from a comment by #Thomas Walpole for this question Check element visibility that is visible for less than a second in Rails Capybara asked by me. The problem was that sometimes the ajax response was very fast and sometimes it was slow. So all I had to was to slow down the network.
// Set the latency time through selenium before the click or select and then check
// for the visibility of the element on page and then again change back the latency
page.driver.browser.network_conditions = { offline: false, latency: 2000, throughput: 789 }
choose 'radio_button' // if radio button
select 'some text', from: 'dropdown_element' // if dropdown
assert page.has_css?('.spinner', wait: 0)
page.driver.browser.network_conditions = { offline: false, latency: 0, throughput: 0 }
// continue with other tests
This worked for my problem. Feel free to improve this solution.

Do not allow past date for drop in fullcalendar

Hi I am using fullcalendar for schdule event
Now I want to disable pas date for drop event, So I fixed using following solution
$('#calendar').fullCalendar({
eventConstraint: {
start: moment().format('YYYY-MM-DD'),
end: '2100-01-01'
},
});
It working fine, but now I want to disable few days from week too, so I added dow in eventConstraint, now its stop working
$('#calendar').fullCalendar({
eventConstraint: {
start: moment().format('YYYY-MM-DD'),
end: '2100-01-01',
dow: [ 3, 5 ]
},
});
In short I want to disable past date and allow to select only wed and fri from calendar.
Is there anyway to fix issue.
Having given this some more thought after your comments, I think this is best solved using some custom code, via the eventDrop callback:
eventDrop: function(event, delta, revertFunc) {
var day = event.start.clone();
day.startOf("day");
var dayOfWeek = day.isoWeekday();
if (day.isBefore(moment().startOf("day")) || (dayOfWeek != 3 && dayOfWeek != 5)) {
revertFunc()
}
}
This will check for both of your constraints: if the day is in the past, or that the day is not a Wednesday and not a Friday, then revertFunc() is executed, which is a fullCalendar-provided callback which sends the event back to its original location on the calendar.
Here you can find a working demo: http://jsfiddle.net/ughug9xx/2/

How to reset (not restore) the grid state?

I have the following plunker working with save/restore and localStorage:
http://plnkr.co/edit/Ad12QG1uKFEf38aOtpaL?p=preview
I can save the grid state, adjust some columns (like column resize, move, etc), and then restore back to the saved grid state just fine.
Once I've saved it though, how would I go about making a "reset" function work? I want to reset it to the default state of my grid before there were any saved changes.
My attempt, which so far is unsucessfull. I'm assuming I would try to save the default state on load before the restore occurs...
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.defaultState = $scope.gridApi.saveState.save();
...
...and then restore similar to the $scope.restoreState function...
$scope.resetState = function() {
$scope.gridApi.saveState.restore($scope, $scope.defaultState);
}
...but that's throwing errors.
I was able to get it to work. Here's a functioning example:
http://plnkr.co/edit/Ad12QG1uKFEf38aOtpaL?p=preview
I took the same approach I outlined in my question, but I had to wrap the defaultState in a $timeout() because the state isn't immediately available within onRegisterApi without that timeout. I just made sure to make it occur before the restoreState timeout.
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$timeout(function() {
$scope.defaultState = $scope.gridApi.saveState.save();
}, 50);
$timeout(function() {
$scope.restoreState();
}, 100);
},
I'm not that familiar with angular yet, so I'm sure someone could improve this.

Phonegap, Cordova watchposition fire success every 1 second

Platform: iOS6/OSx Lion.
I'm trying to puzzle out the way Phonegap/Cordova work with navigator.geolocation.watchPosition.
The docs says that the option "maximumAge" is the one that ask the system for retrieve the position.
So with these options:
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }
I espect the position request will be fired every 3 seconds?
And no matter what maximumAge I put the success is fired every 1 second...
Anyone can explain please?
Thanks Bye
Rob
I am currently working around this issue by using getCurrentPosition with a setInterval. I'm not sure what the consequences may be, but this seems to give me the most control and appears to be the most consistent method across platforms.
// call this once
setupWatch(3000);
// sets up the interval at the specified frequency
function setupWatch(freq) {
// global var here so it can be cleared on logout (or whenever).
activeWatch = setInterval(watchLocation, freq);
}
// this is what gets called on the interval.
function watchLocation() {
var gcp = navigator.geolocation.getCurrentPosition(
updateUserLoc, onLocationError, {
enableHighAccuracy: true
});
// console.log(gcp);
}
// do something with the results
function updateUserLoc(position) {
var location = {
lat : position.coords.latitude,
lng : position.coords.longitude
};
console.log(location.lat);
console.log(location.lng);
}
// stop watching
function logout() {
clearInterval(activeWatch);
}

Progress bar on calling controller in Asp.Net MVC 2

I want to show progress bar when user submit the form because that process will take time may be around 8 to 10 seconds, so i want to show the progress bar so user must have an idea of how much time it will take. This process will be executed on simple call of a controller action like normal postback no ajax involve. So how can i achieve this task i am using asp.net mvc 2
Fraz,
Whilst i notice you say NO AJax INVOLVED, thought I'd chuck this in for info purposes.
As long as you don't care about the 'plase wait' indicator showing exact progress, then there's a simple way to do this with jquery and my answer here is dependent on that.
basically, create a 'Wait' view that contains a simple message along with an animated gif embedded within it. then just fire off your insert (or long running action) via the following basic outline:
$(document).ready(function() {
$('#btnSave').click(function() {
$.ajax({
type: "POST",
url: '<%=Url.Content("~/Booking/Save") %>',
data: { data: prepareData() }, // your data properties to be saved
beforeSend: beforeQuery(),
success: function(data) {
saveDataResponse(data);
},
error: function(xhr) { alert(xhr.statusText); }
});
});
});
// here we show the 'wait' view prior to processing starting
function beforeQuery() {
var url = '<%= Url.Action("Wait", "Booking") %>';
$("#mainDiv").load(url);
}
// when the long running process has completed (or error'd)
// either populate mainDiv with the details view of the booking
// or show the error appropriately
function saveDataResponse(data) {
if (data.length != 0) {
if (data.indexOf("ERROR:") >= 0) {
$("#mainDiv").html(data).css('backgroundColor','#eeaa00');
}
else {
$("#mainDiv").html(data);
}
}
}
obviously, there would be a little more involved for error conditons etc, but this is the basic 'template'.
hope this helps

Resources