I have simple chart with x-axis lables and tooltips,
the date of the months on the tooltips are correct while the months on the x-axis labels is one month behind.
when i change the time zone from GMT+2 US East to UTC-5 the issue resolved.
i also added the following global options useUTC, but it has no affect.
you can see the GMT+2 results in JSFiddle, when you change your timezone, to utc it will resolved.
Highcharts.setOptions({
global: {
useUTC: true
}
});
Any help will be appreciated. (http://jsfiddle.net/liad/uVZ4Z/)
I use highcharts, angularjs and highcharts-ng.
I added the following options (it works for me):
Highcharts.setOptions({
global : {
useUTC : true,
timezoneOffset: -2 * 60 //GMT +2
}
});
Honestly, I don't know how to set global options in highcharts-ng. Is that enough:
$scope.chartConfig = {
global: {
useUTC: true
},
Anyway, I'm in UTC+2h and I see chart properly, Apr for first column (and the same in a tooltip).
It seems this option is not developed at this moment. So have to use Highcharts object directly.
For example, put that code in any of your Angular's config section:
Highcharts.setOptions({
global: {
useUTC: true
}
});
Related
I am trying to create a comparison graph like the one below which will show the data of the current day vs the present day minus 7 days (or 20 days or 90 days, ...).
I am using highcharts and highchart's react wrapper for this and I've created a multi line graph using the following data:
series: [
{
name: "Weekly",
data: [
24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243,
31050,
],
},
{
name: "Weekly Last Week",
data: [
11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243, 29213,
25663,
],
dashStyle: "ShortDash",
},
]
I am able to create the same solid and dashed line effect. The only issue I am facing is how to show the tooltip (as shown in the image below) with the current date vs last date data and their comparison. I used this tooltip option:
tooltip: {
enabled: true,
shared: true,
formatter: function () {
return this.points.reduce(function (s, point) {
return s + "<br/>" + point.series.name + ": " + point.y + "m";
}, "<b>" + this.x + "</b>");
},
},
I was able to recreate it based on the design requirement we had. Here is the link to the codesandbox (minus the proper design for tooltips and legends) for anyone looking for it in the future.
The tooltip's functionality was achieved by adding the formatter function in the tooltip option (found in the chartOptions.js file in the sandbox). It's a hacky code but it is needed to calculate the percentage change between the current day's data vs last week's (present-day minus 7 days) data. In my current case, all data is restricted to 7 days for the time being.
For creating the legend which shows the same percent change data I need to add an empty series in the series data (found in the chartOptions.js file) which will store the calculated value of the percent change of the last day (basically the last value in the array).
If anyone has a better solution for consuming data inside the formatter function of the tooltip or legends then please add it to the answer to this question.
I have angular service which provides highcharts config for highcharts-ng. I prepare data for this service in controller and than call service with data as parameter. All work. But if my range is for example something like this [15,130,0.2] my spiderweb chart is little bit squeezed. So I would like to do different axis scales and I have found solution by using parallel-coordinates.js.
And I have problem to make it works. First picture is what I have and second is what I would like to achieve.
What I have : https://jsfiddle.net/DuFuS/en51rbxc/
What I want: http://jsfiddle.net/DuFuS/tbzfhou5/
First of all (and the most important thing), you're using very old version of highcharts-ng package, and that's why parallel-coordinates.js module isn't working properly.
This module create additional axes basing on the amount of data passed to the chart constructor, but in this version of package, data is unfortunately an empty object on chart init, so the parallel-coordinates.js module doesn't add any additional axis at all.
Next things which causes the problems are typos in configuration here:
chart: {
parallerlCoordinates: true,
parallerAxes: {
...
Should be parallelCoordinates and parallelAxes.
In order to make your chart works, please update the version of highcharts-ng package to 1.2.1, then rebuild your configuration object (because the structure had changed with new version), like below:
return {
chart: {
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
lineWidth: 2,
showFirstLabel: false,
showLastLabel: true
},
polar: true,
type: 'line'
},
xAxis: {
categories: data.categories,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
series: data.series
};
After all changes, chart will look as you expected.
Live example: https://jsfiddle.net/rza5uk67/
Package docs: https://github.com/pablojim/highcharts-ng
How can I get the start and end time of visible days in fullcalendar?
I need it for use in another javascript instance. Is there some function like -
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').visStart
?
According to full-calendar documentation (jQuery plugin on on which the uiCalendar is based on) when you call fullCalendar('getView') you get back the View object with properties:
start
A Moment that is the first visible day.
end
A Moment that is the exclusive last visible day.
So you should be able to get start and end moments as follows:
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').start
and
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').end
Following example shows fullcalendar in angular 2. Should be easily adaptable to your environment. You can use the "viewRender" callback of fullcalendar to maintain the current visible date range. Useful if you intend to fetch business objects only relevant for the visible date range, etc.
var calendarDiv: any;
var self = this;
calendarDiv = $(this.elementRef.nativeElement).find('#calendar');
calendarDiv.fullCalendar({
defaultView: "agendaWeek",
...
viewRender: function (view: any, element: any) {
self.crtCalendarStart = view.start;
self.crtCalendarEnd = view.end;
self.myFilterService.setFilter("filter_plandate", {
type: 'DateTime',
value_from: view.start.toDate(),
value_to: view.end.toDate()
});
},
selectable: true,
selectHelper: false,
...
});
Is there any way to update the option(s) of datetimepicker dynamicaly ?
In my case, on start, i setting my "busy dates" array in the option **disabledTimeIntervals ** of the plugin. It working fine but when I change my differents dates, I update the "busy dates" array and I try to set new option disabledTimeIntervals by passing the updated array each time I change the date like this :
$scope.options = {
locale: 'fr',
sideBySide: true,
format: 'DD/MM/YYYY à HH:mm',
useCurrent: false,
daysOfWeekDisabled: [0, 6],
stepping: 15,
disabledTimeIntervals: $scope.getBusyDates(),
ignoreReadonly: true
};
element.datetimepicker(eval($scope.options));
Unfortunatly that doesn't work and datetimepicker ignore my news settings ... How I can force datetimepicker to review the options when I want ? thank's
Response : For set this new option I have to use the Option function : (http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#options)
So, the correct syntaxe response is :
element.data('DateTimePicker').options(eval(scope.options));
I've found what I'm looking for but it's a jQuery example, it looks super clean and intuitive. Is there a way to do this with xtype 'datefield'? Is there a way to extend this field type to include a clock icon beside the date icon and have it behave the same way as in this example?
http://jsfiddle.net/rniemeyer/T3zge/
ko.kendo.bindingFactory.createBinding({
name: "kendoDateTimePicker",
defaultOption: "value",
events: {
change: "value",
open:
{
writeTo: "isOpen",
value: true
},
close: {
writeTo: "isOpen",
value: false
}
},
watch: {
enabled: "enable",
max: "max",
min: "min",
value: "value",
isOpen: ["open", "close"]
}
});
var viewModel = {
myDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);
I'm still very much a newbie at this so perhaps somebody can lend some advice or point me in the right direction how I can figure this out. Thanks in advance! :)
I have created a DateTime plugin for ExtJS 4 and 5 few months ago.
Give it a try, its a little different than what you showed but works as intended:
https://github.com/gportela85/DateTimeField
Hope it helps
Extjs does have a separate Time Picker, but not a date/time picker combined. You would likely need to create a plugin, but if you are fairly new to this you may find it a little overwhelming.
You could search the forums for custom extensions/plugins people have created, I just came across this one for ExtJs 4.