I'm trying to get the googlevisualization datatable to show the time timeline in 12h format, but no luck so far.
google.load("visualization", "1");
google.setOnLoadCallback(new function () {
// Specify options
that.optionsContainer = {
animate: false, // Mieux pour les perfs
animateZoom: false, // Mieux pour les perfs
width: "1200px",
height: (75 + 25 * (maxGrouping + 1)) + "px", // <= abandonné
start: that.startDate,
end: that.endDate,
min: that.minDate,
max: that.maxDate,
hAxis: {
format: 'hh:mm a'
}
};
}
I've also seen this response - Change to a 24 hour format for datetime data in Google Charts - but I don't think that I'm applying it properly as I don t get any changes:
this.data= new google.visualization.DataTable();
this.data.addColumn('datetime', 'start');
this.data.addColumn('datetime', 'end');
this.data.addColumn('string', 'content');
this.data.addColumn('boolean', 'editable');
this.data.addColumn('string', 'type');
var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy hh:mm a' });
dateFormatter.format(this.data, 0);
I've also tried to set the locale to 'en-US', but it doesn't work:
that.optionsContainer = { locale: 'en-US' ...}
Any ideas?
Edit:
The this.data row looks like:
[Thu Dec 12 2019 17:30:05 GMT+0200 (Eastern European Standard Time), Thu Dec 12 2019 18:45:00 GMT+0200 (Eastern European Standard Time), "<div id="IP_1050" class= .. "Inactive from 5:30 PM to 6:45 PM"></div>", false, "range"]
and the draw method
this.timeline = new links.Timeline(document.getElementById('timeline-div123'));
this.timeline.draw(this.data, this.optionsContainer);
Edit2:
I'm using this library - https://almende.github.io/chap-links-library/js/timeline/doc/#Data_Format , which does not appear to have 12h support. I'll keep looking.
Related
I'm not sure how to spit out the right date/time using moment.js base on diff timezone offset
I've tried USA : MA & TX
console.log(moment().utcOffset('-5').format('ddd MM/DD/y H:mm:ss')); //MA
console.log(moment().utcOffset('-6').format('ddd MM/DD/y H:mm:ss')); //TX
I kept getting
Fri 09/17/2021 18:28:21 //MA
Fri 09/17/2021 18:28:21 //TX
I supposed to get
Fri 09/17/2021 18:28:21 //MA
Fri 09/17/2021 17:28:21 //TX
Any hints for me ?
Try this
console.log(moment.utc().format('ddd MM/DD/y H:mm:ss'), 'UTC');
console.log(moment.utc().add(-5, 'hours').format('ddd MM/DD/y H:mm:ss'), 'MA');
console.log(moment.utc().add(-6, 'hours').format('ddd MM/DD/y H:mm:ss'), 'TX');
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
I am writing my first simple HTML and JavaScript/JQuery page which connects to the Yahoo Weather API (https://developer.yahoo.com/weather/).
So far, I have been able to handle the JSON response in JQuery and update my HTML content using the following:
$('#text').html("Weather is: " + data.query.results.channel.item.condition.text);
So far, so good!
However, I am receiving a "SyntaxError: missing ) after argument list" error when trying to parse the following JSON using this JavaScript:
$('#day0day').html(data.query.results.channel.item.forecast.0.day);
I believe the error is caused by the '0' above but any help would be appreciated.
forecast is an array, so you need to use indexes in order to access the values within it.
$('#day0day').html(data.query.results.channel.item.forecast[0].day);
var data = {"query":{"count":1,"created":"2018-03-06T21:06:04Z","lang":"pt-BR","results":{"channel":{"units":{"distance":"km","pressure":"mb","speed":"km/h","temperature":"C"},"title":"Yahoo! Weather - London, England, GB","link":"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-44418/","description":"Yahoo! Weather for London, England, GB","language":"en-us","lastBuildDate":"Tue, 06 Mar 2018 09:06 PM GMT","ttl":"60","location":{"city":"London","country":"United Kingdom","region":" England"},"wind":{"chill":"45","direction":"180","speed":"11.27"},"atmosphere":{"humidity":"67","pressure":"33423.67","rising":"0","visibility":"25.91"},"astronomy":{"sunrise":"6:36 am","sunset":"5:49 pm"},"image":{"title":"Yahoo! Weather","width":"142","height":"18","link":"http://weather.yahoo.com","url":"http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"},"item":{"title":"Conditions for London, England, GB at 08:00 PM GMT","lat":"51.506401","long":"-0.12721","link":"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-44418/","pubDate":"Tue, 06 Mar 2018 08:00 PM GMT","condition":{"code":"26","date":"Tue, 06 Mar 2018 08:00 PM GMT","temp":"7","text":"Cloudy"},"forecast":[{"code":"39","date":"06 Mar 2018","day":"Tue","high":"10","low":"6","text":"Scattered Showers"},{"code":"28","date":"07 Mar 2018","day":"Wed","high":"9","low":"2","text":"Mostly Cloudy"},{"code":"30","date":"08 Mar 2018","day":"Thu","high":"8","low":"2","text":"Partly Cloudy"},{"code":"11","date":"09 Mar 2018","day":"Fri","high":"9","low":"1","text":"Showers"},{"code":"39","date":"10 Mar 2018","day":"Sat","high":"11","low":"8","text":"Scattered Showers"},{"code":"28","date":"11 Mar 2018","day":"Sun","high":"11","low":"6","text":"Mostly Cloudy"},{"code":"12","date":"12 Mar 2018","day":"Mon","high":"9","low":"6","text":"Rain"},{"code":"12","date":"13 Mar 2018","day":"Tue","high":"8","low":"4","text":"Rain"},{"code":"28","date":"14 Mar 2018","day":"Wed","high":"9","low":"4","text":"Mostly Cloudy"},{"code":"12","date":"15 Mar 2018","day":"Thu","high":"9","low":"5","text":"Rain"}],"description":"<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/26.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Cloudy\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Tue - Scattered Showers. High: 10Low: 6\n<BR /> Wed - Mostly Cloudy. High: 9Low: 2\n<BR /> Thu - Partly Cloudy. High: 8Low: 2\n<BR /> Fri - Showers. High: 9Low: 1\n<BR /> Sat - Scattered Showers. High: 11Low: 8\n<BR />\n<BR />\nFull Forecast at Yahoo! Weather\n<BR />\n<BR />\n<BR />\n]]>","guid":{"isPermaLink":"false"}}}}}}
console.log(data.query.results.channel.item.forecast[0].day); //This is your approach!
data.query.results.channel.item.forecast.forEach(f => $('#day0day').html($('#day0day').html() + ' - ' + f.day));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="day0day"></span>
I'd like to preface this saying I know very little JavaScript.
I have a Bootstrap datepicker using a date range, picked up from eternicode.
My goal is to select a day in startDate and then have the days available to endDate only be on or after startDate and within startDate's financial year.
Examples:
If I chose Oct 1st 2016, the endDate should cap out at Sep 30th 2017
If I chose Jan 12th 2017, the endDate should cap out at Sep 30th 2017
If I chose Sep 30th 2017, the endDate should also be Sep 30th 2017
Pretty much, if the startDate month is in [Oct, Nov, Dec] then
endDate caps out at Sep 30th (startDate year + 1) else endDate caps
out at Sep 30th (startDate year)
In my reportWebpage.cshtml file I have:
<div class="col-md-2">
Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
<div class="input-daterange input-group" id="datepicker">
#Html.TextBox("startDate", "", new { #class = "input-sm form-control", name= "startDate" })
<span class="input-group-addon">to</span>
#Html.TextBox("endDate", "", new { #class = "input-sm form-control", name = "endDate" })
</div>
</div>
In my related.js I have a very basic datepicker setup:
$(function () {
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
});
I know there is a datesDisable property I can set, and while it's functionality is what I want it seems to be based off an array of dates which seems like the wrong idea here.
As a test, I replaced the datapicker js code above with what is shown below.
Like in this SO Answer I've tried adding an onSelect property to just the #startDate datepicker, but I'm not getting a response from the alert embedded, nor is Google Chrome's Dev Tools hitting the debug point placed on it:
$('#startDate').datepicker({
onSelect: function() {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
year = date.getFullYear();
alert(day + '-' + month + '-' + year);
}
});
I was hoping that by doing that I could at least start building some if else loops or something.
I'm struggling to figure out how to even start with this problem, so any help or suggestions will be very much appreciated!
Edit 1:
I figured out that trying to disable a huge range of dates was the wrong way to view this problem, and that I should instead focus on utilizing the setStartDate and setEndDate properties.
Using some combined tips from these SO answers:
Bootstrap datepicker change minDate/startDate from another datepicker
Print Var in JsFiddle (This was mostly just a helper, giving credit where credit is due)
I mashed together this JSFiddle: http://jsfiddle.net/wsodjsyv/203/
Where it currently is, it does it's job of restricting to the proper financial year. I just need to tweak it so that when I clear End Date I'm able to move Start Date past that point again. Right now it'll require a refresh if I determine I want to move Start Date past Sept. 30 (whatever year got chosen)
Here is my new related.js file pertaining to the date picker; with this code I am able to restrict the date range to Start Date's fiscal year:
$(function () {
// Ranged datepickers
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
$('#startDate').datepicker().on('changeDate', function(selected) {
var endDate_Bottom = null;
var endDate_Cap = null;
if (selected.date != null) {
endDate_Bottom = new Date(selected.date.valueOf());
endDate_Cap = new Date(selected.date.valueOf());
if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
} else {
endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
}
}
$('#endDate').datepicker('setStartDate', endDate_Bottom);
$('#endDate').datepicker('setEndDate', endDate_Cap);
});
$("#endDate").datepicker().on('changeDate', function(selected) {
var startDate_Cap = null;
if (selected.date != null) {
startDate_Cap = new Date(selected.date.valueOf());
}
$('#startDate').datepicker('setEndDate', startDate_Cap);
}).on('clearDate', function(selected) {
var startDate_Cap = null;
$('#startDate').datepicker('setEndDate', startDate_Cap);
});
});
I've added some checks for when the date is null to avoid the console log being filled with errors when .valueOf() is called on an empty date.
I also brought back the dateRangeContainer block to handle the repeated options and to allow for the styling that highlights the date range selected in the calendar.
I have a lot of values since 30 Nov 2015 to 29 Feb 2019. Since 29 Feb to 11 Apr is nothing, and then new values after 11 Apr.
If I use "date" type of axe, I will have a big space beetwen 29 Feb and 11 Apr: http://white-fund.com/#roiPage (left chart)
If I use string type of axe, I will have no grouping (no few days in 1 element) and no display by month.
I need date format, grouping and no space, like I get it in Excel: http://white-fund.com/pictures/total_roi.png
Code:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'ROI per day');
data.addColumn('number', 'Total ROI');
<?php
$db = new db();
$ROIRows = $db->select("roi");
if($ROIRows) foreach ($ROIRows as $ROIRow) {
echo "data.addRow([new Date(\"$ROIRow[date_time]\"), ". ($ROIRow['roi']/100) .", ". ($ROIRow['total_roi']/100) ."]);";
}
?>
var formatter = new google.visualization.NumberFormat({
pattern: '#,###%',
fractionDigits: 2
});
formatter.format(data, 1);
formatter.format(data, 2);
// Create and draw the visualization.
new google.visualization.ComboChart(document.getElementById('chart_div')).
draw(data, {curveType: "function", width: 540, height: 290,
vAxes:{
0: {title:'ROI per day', format: 'percent'},
1: {title:'Total ROI', format: 'percent'}
},
series:{
0:{targetAxisIndex:0, type: 'bars', logScale:false},
1:{targetAxisIndex:1, type: 'line', pointSize:7, logScale:false},
},
seriesType: 'bars'
}
);
}
google.charts.setOnLoadCallback(drawChart);
Another one problem: how to display percents in float, not int? I trying to use formatter, but it shows 272.52% as 273%.
Thank you!
To fill-in gaps, add interpolateNulls: true to your configuration options...
As for the number format, try this pattern --> '#,##0.00%'
and lose fractionDigits: 2
i have problem with my script using jquery.countdown.js plugin, it doesn't sets multiple instances for each element i pass it to, it always sets the first instance for all, so countdowns are always the same.
link to plugin : http://keith-wood.name/countdown.html
$(function(){
$.each($('.countdown'), function() {
var _element = '.countdown-'+$(this).attr("id");
if($(_element).length > 0){
var _expDate = $(_element).attr('data-expiration').split(',');
var _datetime = Date(_expDate);
init_countdown(_element,_datetime);
}
});
});
function init_countdown(_element,_datetime){
console.log(_element + ", " + _datetime)
$(_element).countdown({
until: _datetime,
format: 'yowdHMS'
});
}
HTML:
<h5 class="muted countdown countdown-1" id="1" data-expiration="2014,10,26,14,10,35"> 2014-10-26 14:10:35</h5>
<h5 class="muted countdown countdown-2" id="2" data-expiration="2014,10,26,16,10,35"> 2014-10-26 16:10:35</h5>
<h5 class="muted countdown countdown-3" id="3" data-expiration="2014,10,26,18,10,35"> 2014-10-26 18:10:35</h5>
this is how it outputs
how can i fix this?
console.log()
.countdown-1, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-2, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-3, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
#Asad example:
The date constructor (in the form you are using it) accepts several integer values, not an array. You need to turn each value in the array that results from your split into a integer (using parseInt), then pass each argument individually, and not as an array.
Try this:
var _expDate = $(_element).attr('data-expiration').split(',');
_expDate.forEach(function(v,i,a){a[i]=parseInt(a[i]);});
var _datetime = new Date(_expDate[0],_expDate[1],_expDate[2],_expDate[3],_expDate[4],_expDate[5]);