FullCalendar time on vertical axis - fullcalendar

Is there a way to change the time on the vertical axis?
Iā€™m trying to make school timetable calendar with 45 min slots, starts 8:30 ā€“ 09:15, 09:20 ā€“ 10:05 and so on.
Any idea?

add the option slotMinutes: 45 to make the intervals 45 minutes and set start time by adding the option minTime: '8:30am'
like this:
$("#calendar").fullCalendar({
slotMinutes: 45,
minTime: '8:30am',
//the reset of options.....
});
link to documentation: http://arshaw.com/fullcalendar/docs/agenda/

Related

How to plot line graphs with time in Power BI

My table looks something like this:
Location
TimeSlot
Mean Rate
New york
22-02-15 22:00:00
22.40
New york
22-02-15 21:45:00
23.00
New york
22-02-15 21:30:00
22.00
New york
22-02-15 21:45:00
34.00
Basically the signal is every 15 minutes and the data go back 1year+
At the moment I have a line chart that I have done by putting the location, timeslot and mean rate into the field section. This works fine, but Im still getting used to the 'drill down' + 'hierarchy' options, I feel like they dont work very well. They are always summing up my values which makes the plot line inaccurate. I have fixed this by choosing 'maximum' in the field section so that it show the highest value (mean rate) on a given day but this doesn't work as well for month or year.
Also, I don't like that I cant see the entire table in one view, you have to scroll across which can be hard to read when you want to assess trends etc. (Ive added a pic)
enter image description here
So my question, is there a different/better way of getting and displaying this line chart?
When you drop the date into the axis field and Power BI automatically creates a date hierarchy, use the dropdown on the date field and change it from "Date Hierarchy" to "Timeslot", i.e. the field name.
Before
After

Google image-charts x-axis lable not responding to the chxl attribute

I am trying to implement a chart into my website using image-charts, but no matter how I set the x-axis, the labels never works out the way I want it to be.
I read through their documentation, where it says that I can use chxl=<axis_index>:|<label_1>|...|<label_n> to set custome axis labels. I tried using chxl=0:|0|5|10|15|20|25|30|35|40|45|50|55|60 to label my x-axis, from 0 to 60 with the interval of 5, but it is incrementing by the interval of 10.
This is my graph: https://image-charts.com/chart?cht=lxy&chs=999x480&chd=t:0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60|660,570,520,615,492,510,523,495,500,510,562,570,572,531,544,551,568,567,584,570,560,545,537,543,521,517,522,512,519,516,511,519,529,528,533,525,519,531,529,524,524,524,522,518,520,530,518,524,517,512,515,505,507,509,514,505,506,503,502,504,504|0,5,10,15,20,25,30,35,40,45,50,60|0,492,528,612,648,324,492,636,456,492,444,528,396&chco=ffbc8a,407bcb&chg=1,50&chxt=x,y&chls=3|3&chdl=Overall|Last%205%20seconds&chdlp=t&chxl=0:|0|5|10|15|20|25|30|35|40|45|50|55|60
As you can see from the last line of the url, I have chxl=0:|0|5|10|15|20|25|30|35|40|45|50|55|60, but if you click on the link and look at the image, the labels for the x-axis is incrementing by 10. I also tried changing the attribute to other values, but the labels always stay as 0 10 20 30 40 50 60.
Disclaimer: I'm Image-Charts founder.
Image-Charts.com was created in 2016 to be as close as possible as the now soon to be shutdown Google Image Charts API.
Here is our documentation regarding axis labels. Please use our documentation instead of the one from Google Image Charts.
Axis labels will be automatically skipped if they can't be displayed on screen.

Changing background color on a specific day in VIS.JS timeline

I use vis.js timeline, and it works great.
The issue is with the way the CSS class changes when you zoom in and out, as I have it now, every other week changes color ( grey and white ) works perfectly when zoom is set at showing week numbers, but zooming in to days the formation is gone, as week now doesn't exist.
My workaround was to change Monday to Sunday every other time, but I haven't found a way to do that.
The code I think to use in some way is:
/* This changes the color of the selected day ( weekends this time )
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
What I need to figure out and what I can't seem to wrap my head around is, how to get Monday to Sunday, every other time? So I match the further out zoom of weeks.
Any help! How that could be done or if it is actually possible would help a lot.
I have found a solution to my issue, it may not be the correct way, but it does what I need it to do.
what I did, was making a new Group, ( as I place some new items on the timeline numbering the weeks ( this is optional )
on that group i then added
that code is like this:
groups.add([{id: 0}]);
items.add({
id: 'week' + random,
group: week,
content: 'week ' + number,
start: weekstart,
end: weekend,
type: range
className:'Weektophidden',
});
items.add({
id: 'week' + random,
group: week,
content: 'week ' + number,
start: weekstart,
end: weekend,
type: range
className: alternateweekcolor,
});
the variables are linked to some CSS and math finding out when the week is starting and ending.
if anyone knows a more correct way to solve this, I would still like to know, so I can be wiser on this vis.js program.

asp.net chart: final series getting cut off when setting .AxisX.Maximum

I'm trying to bind a data table like,
month value
5 345
10 1300
12 450
to an ASP.NET Chart control. My problem is that the data table only contain months that have values while in the chart i want to show the full month range from 1st to the 12th.
So i used
Chart1.ChartAreas["ChartArea1"].AxisX.Minimum = 1;
Chart1.ChartAreas["ChartArea1"].AxisX.Maximum = 12;
But when i do this, a part of the final series gets cut off in the middle like this.
I can avoid this issue by making the maximum 13 but that would not be appropriate since i just need to show the months of the year. Please help.
Yes but look at how the x-axis is measured; it is not just 12, then 13. It is 12.2, 12.4, 12.6, 12.8 and then 13.0. So you see if you make 12.0 the maximum you are not going to get the entire bar for the final month. Also your x-axis shouldn't even be on that interval in the 1st place. It should be in whole numbers only since you are measuring months.
An example of using the "Interval" property on an Axis in a bar chart:
<axisx Title="MyValue" Interval="1" IsMarginVisible="false">
I use ASP.NET charts a lot, and the best site is the one below. I highly recommend downloading the FULL .NET project and look at the samples and code. These types of bar charts are trivial, as you will see after looking at some of the examples in the .aspx sample pages.
Samples Environment for Microsoft Chart Controls:
http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418
this is about aligning the series position and controlling the width of series
check links
http://asp-net-example.blogspot.com/2010/09/how-to-use-chart-backimagealignment.html
MS Chart with ASP.NET chart type "column" not showing axis x label if there are more than 9 bar in the chart
http://forums.asp.net/p/1516836/3636476.aspx
also generally useful
http://betterdashboards.wordpress.com/2009/02/11/align-multiple-chart-areas/
http://www.ezzylearning.com/tutorial.aspx?tid=4337488

Flex LineChart advanced horiztonal axis?

I want to make a line chart that allows the user to select a date range for the data. For example if the date range span is more than 1 month, I want to to have a bar that shows the months, also if the date range is around 30 days or less I want it to show the dates for each day as well. Something like that.
Does anyone have any suggestions?
Thanks!
I would suggest using a DateTimeAxis, and setting the labelUnits property to "days" or "months" as appropriate. The axis will then do all the hard work of grouping your data accordingly.
In your particular case, when the user makes a choice from the combo box, you should have a handler that computes how granular to make the x-axis based on the user's date selections.

Resources