SureCalf is a vaccination programme that is used to certify whether or not cattle are correctly imunised against respiratory diseases before they are traded at market. The Vaccination Planner was designed to visually illustrate the timeframes for correct immunisation based on a number of parameters such as the date of sale, whether or not the cattle were to be housed over winter and the vaccination programme they are on.
Working closely with the design team at Bright White Space and MASS UK, I produced this tool in ASP.NET MVC and jQuery that takes the inputted form data and outputs a nice visual chart depicting the valid ranges for vaccinations. The data is submitted into the form via an AJAX POST request and is run through the business logic that runs the main website (which I also produced) to generate the correct date ranges. These are then used to dynamically generate the resulting HTML and CSS which is then plotted onto the chart.
Because the chart is generated dynamically the CSS generated had to be consistent across months which, of course, have a different number of days in them. To correctly "fit" into the visual design, each day worked out to be approximately 7 pixels in width on the chart and thus, depending on the months that were shown, the columns had to be shortened or widened to correctly show the positions of the date plots. Example: February which has 28 (or sometimes 29) days, and December which has 31 days. The resulting column widths were 7px*28 days = 196px and 7px * 31 days = 217px accordingly. This was important because otherwise the display of the dates would not be in the correct position and the chart would be less useful to the customer.