I would like to ask if is possible set "FROM" and "TO" in the highchars/Stock.
I am using YEAR, so I would like to load the year but in the Input FROM and TO set a value dynamically with number after a calculation.
Is this possible?
Thank you.
1.Update:
With:
var minDate = $('input.highcharts-range-selector:eq(0)').val();
var maxDate = $('input.highcharts-range-selector:eq(1)').val();
I can get the date, but to set should be different.
var dateCurrent = new Date();
events:{
load:function(){
this.xAxis[0].setExtremes(
Date.UTC(2000, 0, 1), dateCurrent
);
}
}
Just use setExtremes().
Related
I am trying to use React Datepicker in my React application. I am following this document - https://reactdatepicker.com/
I need a date picker which will only show 31 days.
Here is the simple code from the react-datepicker documents.
<DatePicker selected={dayPicker} onChange={(date) => setDayPicker(date)} dateFormat="yyy/MM/dd" isClearable={true}
/>
It shows the full calendar. How can I customize the calendar ? Is it possible to remove the header from the calendar and replace it with a text "Days" ?
Following code will give you date picker for current year with only Month in header.
You just need to use renderCustomHeader property of DatePicker.
const year = 2022; // can be provided externally
const month = 2; // can be provided externally
const date = 24; // can be provided externally
const [startDate, setStartDate] = useState(new Date(year, month, date));
const minDate = new Date(year, month, 1);
const maxDate = new Date(year, month + 1 , 0);
const renderDayContents = (day, date) => {
if(date < minDate || date > maxDate){
return <span></span>;
}
return <span>{date.getDate()}</span>;
};
return (
<DatePicker
selected = {startDate}
minDate = {minDate}
maxDate = {maxDate}
onChange = {(date) => setStartDate(date)}
renderCustomHeader = {() => <div></div>}
renderDayContents = {renderDayContents}
dateFormat = "dd"
/>
);
This is how it will look:
Explaination:
We can create out customer header with the renderCustomHeader property of DatePicker.
This functions returns JSX (kind of html) which has empty div as we don't want to show anything in header.
Apart from renderCustomHeader property, we have set minDate and maxDate property of DatePicker to restrict it for current month.
You need to copy above code in a component where you are using DatePicker.
You can refer https://reactdatepicker.com/#example-custom-header to know more about custom header for DatePicker
I want to create a spreadsheet where I can add people on it and see which hours everyone is available to do a online meeting. It's mandatory to consider the timezone but I have no clue how to do it.
Person1 sheet example:
Matching hours:
I think my idea of showing 'matches 4 out of 5' is nice, cause the remaining one can make an effort to show up and edit it so it can be like 'matches 5 out of 5'. But any other suggestion is welcome.
The link of the actual spreadsheet(copy to your own drive so you can edit): https://docs.google.com/spreadsheets/d/1yun8uMW2LZUumlm6cy3hqPT-FLQipADSIjLQPNiwXl4/edit?usp=sharing
PS: It would be nice to support DST (daylight save time) but it's not mandatory. The person who is in DST will adjust it.
Assuming your timezone values are all offsets of the Match Sheet (if the match sheet says 01:00 and your timezone is -1, your local time would be 00:00), here is some code that will show you the text in the way that you want:
function availablePeople(startTime, dayOfWeek) { //All slots are 1 hour long
const sheetsNames = ["person1", "person2", "person3", "person4"]; //Edit this to update possibilities
const dayHeaderRow = 2;
const startTimeCol = 1;
const endTimeCol = 2;
var sheets = SpreadsheetApp.getActive();
var referenceHourRow = sheets.getSheetByName("match").getRange(dayHeaderRow+1, startTimeCol, 24).getValues().map(function (x) {return x.toString()}).indexOf(startTime.toString());
var referenceDayCol = sheets.getSheetByName(sheetsNames[0]).getRange(dayHeaderRow, endTimeCol+1, 1, 7).getValues()[0].indexOf(dayOfWeek);
var availablePeople = 0;
if (referenceHourRow != -1) {
for (var i = 0; i<sheetsNames.length; i++) {
var personSheet = sheets.getSheetByName(sheetsNames[i]);
var timezone = -personSheet.getRange(1, 4).getValue();
var thisDayCol = referenceDayCol;
var thisHourRow = referenceHourRow;
if (timezone!=0) {
if (thisHourRow+timezone<0) {
//Went back a day.
thisDayCol = (thisDayCol+6)%7;
thisHourRow = 24-(referenceHourRow-timezone);
} else if (thisHourRow+timezone>=24) {
//Went forward a day
thisDayCol = (thisDayCol+1)%7;
thisHourRow = (thisHourRow+timezone)%24;
} else {
thisHourRow += timezone;
}
}
var cell = personSheet.getRange(dayHeaderRow+1+thisHourRow, endTimeCol+1+thisDayCol);
if (cell.getValue()=="Available") {
availablePeople++;
}
}
}
return availablePeople+" out of "+sheetsNames.length;
}
This is how to use this function: =availablePeople(<START TIME>,<DAY OF THE WEEK>).
To allow this to be dragged and autocompleted, write =availablePeople($A3,C$2) in the "Monday" "00:00" and then drag it horizontally and vertically to update the formula.
I have a price slider on my site and price range is displayed as £0.0 - £5,000,000.0 with a trailing zero.
I have change the number format code from:
format: wNumb({
decimals: 1
})
to:
format: wNumb({
decimals: 0,
thousand: ','
})
Now this price is being displayed as £ 0 - £ 5,000,000 which is what I want.
The problem now is when doing a search the price in the url is displaying the ascii encoding for a comma %2C and it's not filtering the search results
adv_filter_price_min=0&adv_filter_price_max=5%2C000%2C000
How can I get it so the ascii encoding is not used in the url? eg:
adv_filter_price_min=0&adv_filter_price_max=5000000
Many Thanks
S
Full Code
var rangeslider = jQuery('.rangeslider');
var rangecontainer = rangeslider.parent('.rangeslidercontainer');
var txtlowprice = rangecontainer.children('.adv_filter_price_min');
var txthiprice = rangecontainer.children('.adv_filter_price_max');
var spnlowprice = rangecontainer.find('.text_price_min');
var spnhiprice = rangecontainer.find('.text_price_max');
var defminprice = Number(interfeis_var.search_minprice);
var defmaxprice = Number(interfeis_var.search_maxprice);
var hdnminprice = txtlowprice;
var hdnmaxprice = txthiprice;
var minprice = Number(hdnminprice.val());
var maxprice = Number(hdnmaxprice.val());
if(rangeslider.length){
rangeslider.noUiSlider({
start: [ minprice, maxprice ],
step: 10000,
range: {
'min': defminprice,
'max': defmaxprice
},
connect: true,
// Set some default formatting options.
// These options will be applied to any Link
// that doesn't overwrite these values.
format: wNumb({
decimals: 0
})
});
rangeslider.Link('lower').to(txtlowprice);
rangeslider.Link('upper').to(txthiprice);
rangeslider.Link('lower').to(spnlowprice, setFormat);
rangeslider.Link('upper').to(spnhiprice, setFormat);
}
You are using wNumb to format the input passed to slider, so when you try to fetch data back from slider, it returns you formatted inputs.
In Your case, when you formatted it using thousand: ',' , it make a number 50000 to 50,000 (Notice the comma). So when you try to fetch it back from slider it returns you 50,000 instead of 50000.
So I suggest you to do following to unformat the numbers back.
Create wnumb object to pass it to slider
var thousand_format = wNumb({
decimals: 0,
thousand: ','
});
When you get input back from slider after using slider unformat it using thousand_format object using wnumb's from method.
var unformat_input = thousand_format.from( '50,000' ); // it will return 50000
Same unformat_input you use to set in url. wNumb causes slider to not work properly as wNumb requires numbers(50000) and after your first usage you must be passing it string(50,000).I hope by unformating it should fix the issue.
Know more about wNumb here
Hi I'm trying to have my spreadsheet include multiple timestamps across different tabs in this spreadsheet. Whenever data is edited in Column J, I want a timestamp to immediately populate in Column K. I have 4 sheets within the 1 Google Sheet, and I need all of them to have this automated timestamp running independently. Thanks for any help. I've tried looking to other posts, but have a difficult time modifying code from other people's docs to work for my own.
I was using the following script function to get this timestamp. It worked fine when I only had one tab to the google sheet. But now that I have multiple tabs it only updates one sheet. Trying to figure out how to get it to do the same thing across the whole doc.
function onEdit(event)
{
var timezone = "EST";
var timestamp_format = "MM-dd-yyyy HH:mm:ss"; // Timestamp Format.
var updateColName = "PM Status ";
var timeStampColName = "Date Update";
var sheet = event.source.getSheetByName('Walt'); //Name of the sheet where you want to run this script.
var actRng = event.source.getActiveRange();
var editColumn = actRng.getColumn();
var index = actRng.getRowIndex();
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues();
var dateCol = headers[0].indexOf(timeStampColName);
var updateCol = headers[0].indexOf(updateColName); updateCol = updateCol+1;
if (dateCol > -1 && index > 1 && editColumn == updateCol) { // only timestamp if 'Last Updated' header exists, but not in the header row itself!
var cell = sheet.getRange(index, dateCol + 1);
var date = Utilities.formatDate(new Date(), timezone, timestamp_format);
cell.setValue(date);
}
}
Here you go. Setup an onEdit() trigger. I tested it. It works. It currently works on all of the sheets in the spreadsheet but it's easy to limit it to specific sheets. You could put all the required sheets into an array like var wantedSheets=['Sheet1','Sheet2','Sheet3','Sheet4']; and do wantedSheets.indexOf() to find out if the current sheet is in or out.
function onTimeStampEdit(e)
{
var ss=e.source;
var sh=ss.getActiveSheet();
var rg=e.range;
var row=rg.getRow();
var col=rg.getColumn();
if(col==9 || col==10)
{
sh.getRange(row,11).setValue(Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MM/dd/yyyy HH:mm:ss"));
}
}
You can use this to setup an installable trigger. Just add the SpreadsheetId.
function installOnEditTrigger()
{
setupTrigger('onTimeStampEdit','SpreadsheetId');
}
function setupTrigger(funcName,SpreadsheetId)
{
if(!isTrigger(funcName))
{
ScriptApp.newTrigger(funcName).forSpreadsheet(SpreadsheetId).onEdit().create();
}
}
function isTrigger(funcName)
{
var r=false;
if(funcName)
{
var allTriggers=ScriptApp.getProjectTriggers();
var allHandlers=[];
for(var i=0;i<allTriggers.length;i++)
{
allHandlers.push(allTriggers[i].getHandlerFunction());
}
if(allHandlers.indexOf(funcName)>-1)
{
r=true;
}
}
return r;
}
Is it possible to get the values of the date-input-boxes from rangeSelector?
var chart = new Highcharts.StockChart(chartingOptions);
...
var zoomStartEpochTime = chart.rangeSelector.leftBox.HCTime;
var zoomEndEpochTime = chart.rangeSelector.rightBox.HCTime;
Alternatively you can query the xAxis's extreme values for the same
var zoomStartEpochTime = chart.xAxis[0].getExtremes().min;
var zoomEndEpochTime = chart.xAxis[0].getExtremes().max;
Yes you can get these values. If you are using JQuery:
var minDate = $('input.highcharts-range-selector:eq(0)').val();
var maxDate = $('input.highcharts-range-selector:eq(1)').val();