I have a an analytics DataChart which displays monthly traffic. The problem is, the x-axis is showing month indices and I want it to show month name labels (e.g. January, February, March, etc.). Is there a way I can format the month axis as the month name?
var pastYearChart = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': my_ID,
'start-date': '365daysAgo',
'end-date': 'today',
'metrics': 'ga:sessions,ga:users',
'dimensions': 'ga:month'
},
chart: {
'container': 'traffic-past-year-container',
'type': 'COLUMN',
'options': {
'width': '100%'
}
}
});
var month = [
"January",
"February",
"etc"
];
for(var i = 0, len = month.length; i < len; i++) {
// month[i] contains your month based on your index
}
Related
I have the following code already working well in functions.php - I want to enable mothers day though (12 may 2019) which falls on a Sunday. How to do I add this to the return string?
function custom_adjust_datepicker_range () {
if ( is_checkout() ) {
?>
<script type="text/javascript">
var disabledDays = [
"1-1-2019","1-1-2020","2-1-2019","28-1-2019","27-1-2020","4-3-2019","2-3-2020","19-4-2019","10-4-2020","22-4-2019","13-4-2020","25-4-2019","25-4-2020","27-4-2020","3-6-2019","1-6-2019","30-9-2019","28-9-2020","25-12-2018","25-12-2019","25-12-2020","26-12-2018","26-12-2019","26-12-2020","27-12-2018"
];
jQuery( "#delivery_date" ).datepicker({
minDate: 2,
beforeShowDay: function(date) {
var day = date.getDay();
var string = jQuery.datepicker.formatDate('d-m-yy', date);
var isDisabled = (jQuery.inArray(string, disabledDays) != -1);
return [(day != 1 && day != 0 && !isDisabled), ''];
}
});
</script>
<?php
}
} // End custom_adjust_datepicker_range()
add_action( 'wp_footer', 'custom_adjust_datepicker_range', 50 );
Consider the following example.
jQuery(function() {
var disabledDays = [
"1-1-2019", "1-1-2020", "2-1-2019", "28-1-2019", "27-1-2020", "4-3-2019", "2-3-2020", "19-4-2019", "10-4-2020", "22-4-2019", "13-4-2020", "25-4-2019", "25-4-2020", "27-4-2020", "3-6-2019", "1-6-2019", "30-9-2019", "28-9-2020", "25-12-2018", "25-12-2019", "25-12-2020", "26-12-2018", "26-12-2019", "26-12-2020", "27-12-2018"
];
var dtf = 'd-m-yy';
function getMothersDay(y) {
var mayFirst = new Date(y, 4, 1);
var dayOfWeek = mayFirst.getUTCDay();
var firstSunday;
if (dayOfWeek == 0) {
firstSunday = mayFirst;
} else {
firstSunday = new Date(y, 4, 1 + (7 - dayOfWeek));
}
var mothersDay = new Date(y, 4, firstSunday.getDate() + 7);
return mothersDay;
}
function isMothersDay(dt) {
return (jQuery.datepicker.formatDate(dtf, dt) == jQuery.datepicker.formatDate(dtf, getMothersDay(dt.getFullYear())));
}
jQuery("#delivery_date").datepicker({
minDate: 2,
beforeShowDay: function(date) {
var day = date.getDay();
var string = jQuery.datepicker.formatDate(dtf, date);
var isDisabled = jQuery.inArray(string, disabledDays);
var result = [
true,
"",
""
];
switch (true) {
case isMothersDay(date):
// Mother's Day
result = [
true,
"mothers-day",
"Mother's Day"
];
break;
case (isDisabled >= 0):
// Disable Days
result[0] = false;
break;
case (day == 0):
case (day == 6):
// Weekends
result[0] = false;
break;
}
return result;
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Delivery Date: <input type="text" id="delivery_date"></p>
See More: How to calculate Mother’s Day in JavaScript
This example was based on first Google search result I performed. In the future, you may want to search for basic examples.
This is not adjusted for WordPress, so you will need to adapt the code to your needs.
You have 3 basic checks:
Is the date Mother's Day
Is the date in the array of dates
Is the date a weekend day
You might have other scenarios arise so using a switch() might be easier overall. I move from the least common condition to the most common condition. You could add more and only check if it's Mother's Day if the month is May and they day of the month is within the first 2 weeks: (date.getMonth() == 4 && date.getDate() < 15).
Hope this helps.
this is my format of data:
[{city:"Bhopal",id: 1},{city:"Bhopal",id: 2},{city:"Delhi",id: 3},{city:"Delhi",id:3}]
here i have Delhi repeated twice with same id.
now i need distinct count of city where id is distinct i.e like :
[key:"Bhopal",value:2, key:"Delhi",value:1]
where value is count
got the answer using Reductio and Crossfilter.
var payments = crossfilter([
{city: "Bhopal", id: 1},{city: "Bhopal", id: 2},{city: "Delhi", id: 3},{city: "Delhi", id: 3}
]);
var dim = payments.dimension(function(d) { return d.city; });
var group = dim.group();
var reducer = reductio()
.exception(function(d) { return d.id; })
.exceptionCount(true);
reducer(group);
console.log(group.top(Infinity));
output: [ { key: 'Bhopal', value: { exceptionCount: 2 },{ key: 'Delhi', value: { exceptionCount: 2 }]
I am working with date-time highchart and I want x-axis tick interval to appear every month(jan-12, Feb-12, Mar-12). But If the data points are less than 4 then the x-axis label starts showing days of month as well (10 dec,24 dec, 7 jan). How do I make sure that even if there are less data points or the graph is zoomed, the tick interval are monthly. Here is the code for x-axis:
xAxis : {
type: 'datetime',
tickmarkPlacement:'on',
dateTimeLabelFormats: {
month: '%b-%y',
},
minRange:1*30*24*60*60*1000,
labels : {
rotation :'280',
align:'right',
style: {
fontFamily : 'Helvetica',
fontSize: '10px'
}
}
}
Thanks in Advance
As mentioned in my earlier comment, the easiest way to get what you've asked for is to set the tickInterval:
xAxis: {
type: 'datetime',
tickInterval:86400000 * 30
}
Example:
http://jsfiddle.net/jlbriggs/Lmfa5v55/
With this setup it doesn't matter what interval your data is in - in the example, it's daily - or if it's irregularly spaced or not.
It doesn't matter what level of zoom, or how many data points, you'll have a tick and label for each month within the bounds of the data.
Try put exact interval tick, and automatic day or month will appear.
You only need format label, after put ticks.
Options.xAxis.tickPositioner = function () {
const ticks = this.series[0].xData;
let result = [];
for (let index = 0; index < ticks.length; index++) {
result.push(ticks[index]);
}
return result;
};
and format xAxis
labels: {
format: "{value:%b-%Y}",
align: "center"
}
to tooltips
tooltip: {
valueSuffix: "",
valuePrefix: "",
xDateFormat: "%B - %Y",
valueDecimals: 0
},
The problem here is that not all the months have 30 days, is better not to set the tickInterval or the minRange. You could try to generate the months at your own, like:
startDate = Date.UTC(2012, 1, 1); //your starting date
// Set the xaxis value as first day of month
for (var i = 0; i < yourData.length; i++) {
var d = new Date();
d.setTime(startDate);
d.setMonth(d.getMonth() + i);
categories.push(d.getTime());
}
Or generate your own categories as shown on Highcharts demo page:
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec' //etc.
],
},
See a working demo of first option at: http://jsfiddle.net/gjkde5np/1/
Extracted from: How to set PointIntervals per month in HighChart
You could also check the code from highcharts "Time series with irregular intervals" http://www.highcharts.com/demo/spline-irregular-time . Here they use the [Date.UTC(1970, 9, 21), 0], [Date.UTC(1970, 10, 4), 0.28]
I have day of year data that I'm working with in a HighChart bubble chart. Data looks about like this:
[2009,265,10930],[2012,27,642],[2012,287,4929],[2010,119,1020]
The X value is the year. The Y value is the day of the year, so 119 is April 29, 265 is September 22. I'd like to actually format the Y axis as dates, but I haven't been able to find a clean way to do that. I could just reformat the data in Calc, but is there a way to calculate that in HighCharts directly?
In Highcharts it's not possible, you need to preprocess data before sending to Highcharts, just like this: http://jsfiddle.net/3bQne/1137/
Note: Highcharts requires sorted data for line/spline series.
var json = [
[2009, 265, 10930],
[2012, 27, 642],
[2012, 287, 4929],
[2010, 119, 1020]
],
DAY = 24 * 3600 * 1000,
jLen = json.length,
data = [],
i = 0;
for (; i < jLen; i++) {
var p = json[i]; // point
data.push([Date.UTC(p[0], 0, 1) + p[1] * DAY, p[2]])
}
// sort data for Highcharts
data.sort(function(a,b) { return a[0] - b[0]; } );
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: data
}]
});
I am using fullcalendar plugin to get and display holidays of a month via Ajax. The problem I am having, is that the method that retrieves the holidays accepts only a year and a month as parameter, not a date range.
When using month view of fullcalendar, the start and end parameter ranges from feb 23rd and Apr 6th. I need it to range from Mar 1st to Mar 31st. That way, I can only get year and month part to call the method.
This is what I tried but without success:
$('#calendar').fullCalendar({
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
events: '/get_month_holidays',
start: {
month: new Date((new Date()).getFullYear(), (new Date()).getMonth(), 1)
},
end: {
month: (new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 1)) - 1
},
buttonText: {
today: 'hoy'
}
})
Any help will be appreciated,
Thanks
Jaime
Finally I used:
eventSources: [
{
url: '/get_month_holidays',
type: 'POST',
data: function() {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.getMonth() + 1,
year: fecha.getFullYear()
}
}
}
],
And it worked. Thanks anyway.
Jaime
jstuardo's solution adds new parameters to the request so you end up with something like this:
http://your.api.com/events?month=8&year=2015&start=2015-07-27&end=2015-09-07
Which is quite confusing and requires you to change the API accordingly.
Better solution would be to change the default start and end parameters. You can achieve that using something like this:
{
url: baseUrl + '/events',
startParam: null, //resetting default fullcalendar parameter
endParam: null, //resetting default fullcalendar parameter
data: function() {
var date = $('#gc-calendar').fullCalendar('getDate')._d;
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
firstDay = $filter('date')(firstDay, 'yyyy-MM-dd');
lastDay = $filter('date')(lastDay, 'yyyy-MM-dd');
//AngularJS way of changing the date format to yyyy-mm-dd
return {
start: firstDay,
end: lastDay
}
}
}
This way your request looks like this:
http://your.api.com/calendar_orders?start=2015-08-01&end=2015-08-31
You can format the date to 'yyy-MM-dd' using any method you like. You can find a bunch of them here:
Get String in YYYYMMDD format from JS date object?