Is it possible to give a different tickFormat() type for my axis labels depending on the time period that is being displayed?
For example if th time range is a day, I would like to show hours tickFormat(d3.time.format('%I'))
If it is a week I would like to show days tickFormat(d3.time.format('%A'))
If it is a month I would like to show weeks tickFormat(d3.time.format('%W'))
And so on and so on...
Related
We are using fullcalendar.io https://fullcalendar.io/docs/slotLabelFormat.
My usecase is to show two calendars right next to eachother, so I only want to show the time axis for one calendar.
By time axis I mean the time interval labels (1:00, 1:30, 2:00) etc.
I have a bar chart where weekly information is shown in an x-axis, the labels correspond to the current day (rightmost label) going back 1 week each (12/28, 12/21, etc). In the same chart there is another scale/x-axis with (different) daily information. When clicking on each day's bar, a tooltip appears with the information for that day.
Example of tooltip
The problem is that when clicking on one of the days where weekly + daily cross over, the weekly index is used so the daily data is displaying information for a different date (ex: for the eighth week bar date is 12/28, but daily information is for the eighth date 11/10).
I tried changing the order of the axes when declaring the chart options, but that messes up the display. I'm looking for a way to access the second axis index instead of defaulting to the top one.
I am facing issue to set full calendar view for ranges of selected dates, As an example when I select dates from May 1 to May 7th using the code
calendar.changeView('dayGrid', {start: startDate,end: endDate});
it shows all the selected dates in vertical columns as in the first section of the figure.
Similarly when I select dates from May 1 to May 8th it shows all the 8 columns in vertical view as in the second section of the figure.
In another case, suppose if I select dates multiples of 7, such as from May 1 to May 14, the calendar view shows 2 horizontal rows, one for each 7 days attached in last section of the figure.
So I tried to get the same horizontal view for 10 days like 7 dates are in first horizontal row and the remaining 3 days in second horizontal row, but could not able to get it. Please suggest the steps to achieve it.
Is there a way to force .vis-grid.vis-saturday and .vis-grid.vis-sunday classes to show. I set up my timeline grouped by employees to show a monthly view but cannot get the Saturday and Sunday to how. I have to zoom in for it to show up. I tried manual add Saturday and Sunday for each employees but the result is not the same, can't get the whole column to shade. Is there anyway I can achieve the shaded to look like the built-in version with the monthly view?
Thanks
1st Picture: Auto shaded with .vis.sunday/saturday classes but have to zoom in to 2 week view to see.
2nd Picture: Manually added events to Saturday and Sunday.
This issues has already been fixed in vis.js.
The xAxis of my charts is represented with days (xAxisType=dateTime).
I modify the selection event (zooming) and depend on the amount of days which are selected in the selection, the chart data is recalculated and the xAxis change to hours (instead of days). And the same process happens if we do another selection in the new chart (data recalculation and xAxis change to ten minutes, instead of hours).
Imagine that we have dates from 1st of February to 25th of February in the chart. If we select the 2nd and 3rd of February, the new recalculated data is shown with hours in the xAxis (now we have in the xAxis from 2nd February 00:00 to 3rd February 23:00, 48 ticks). And if we select again a new period (for example from 2nd February 07:00 to 2nd February 10:00) the new recalculated data is shown but in the xAxis appear ten minutes ticks. Important about this last thing, all the day is shown (24 hours divided in ten minutes ticks) not only the selected period.
The question is, is it any way of launching the regular Highcharts zooming with the selected period (from 2nd February 07:00 to 2nd February 10:00) after this last selection (programmatically)?
With this, appears directly the selected period instead the whole day, and I have the chance to push the button “reset the zoom” and get the whole day (what I have now).
I use Highcharts with Dojo.
To set extremes use:
this.xAxis[0].setExtremes(min,max);
this.showResetZoom();
Im guessing you need to programaticaly reset the zoom. This is a better option than enabling the default highcharts zoom reset label. Since that would require an extra redundant step.
this.zoom()
Thanks.
Looks like this.zoom() does not trigger chart.events.selection event.
In case you need to reset zoom and trigger all events along the way click on "Reset button" programmatically
$('.highcharts-button').click();