I need help with Flipclock.js I have no knowledge of Jquery and this plugin is driving me nuts. I just need to change the date to 11/23/2014 at 6pm but I can not seem to able to figure that out.
Here is my code
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0, 1);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
Where you are setting 'futureDate' instead of adding 1 year set the finish time using:
new Date(year, month, day, hour, minute, second, millisecond);
mdn documentation for date
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. ***change to desired date***
//var futureDate = new Date(2014, 11, 23, 6, 0, 0);
var futureDate = new Date(2014, 10, 23, 18, 0, 0); //fixed as per comments
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, { clockFace: 'DailyCounter', countdown: true });
});
Related
I want to run a function in a specific time, and found a solution here :Call a javascript function at a specific time of day
Code:
var now = new Date();
var threepm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 3, 0) - now;
var twelveam = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 1) - now;
if (threepm < 0) {
threepm += 86400000; // it's after 3PM, try 3PM tomorrow.
}setTimeout(threeamfunction, threepm);
But it doesnt work, so I tried printing both now and threepm without deducting the current time.
New Code:
var now = new Date();
var threepm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 3, 0);
console.log(now);
console.log(threepm);
And I found out that both times aren't the same.
Result of the log is
2020-05-05T19:26:02.913Z
2020-05-05T16:00:03.000Z
Is this normal? Or am I missing something? The reason why my function isn't running because the difference is too big, even when the time set is the same
Okay, so personally I would go with something like a cron job for scheduling something to happen in a specific time or periodically. I suggest you looking at this library, it is awesome and makes your life simple and easy.
I have to create a chart by our website visitor numbers (preferably similar to those of Analytics by Google).
I got a text file filled with the time of visits in milliseconds like this:
[1505385301633, 0][1505219341916, 0][1504999958757,
0][1504854145481, 0][1504601608015, 0][1504385667271,
0][1504380372409, 0][1504112805811, 0][1503866251230,
0][1503865512105, 0]...
This is what I got so far working with Google Charts:
https://jsfiddle.net/2djpec3s/
Controls: drag to zoom, right-click to reset
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'], 'language':'de'});
google.charts.setOnLoadCallback(drawChart);
// not in use yet
/* var date = new Date(1507130849370);
date = msToDate(date);
function msToDate(date) // milliseconds to year, month, day
{
var year = date.getFullYear();
var month = date.getMonth();
var date = date.getDate(); // day
return new Date(year, month, date);
} */
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Visitors'],
[new Date(1507130849370), 1],
[new Date(1507149651188), 1],
[new Date(1507191655367), 1],
[new Date(1507212560124), 1],
[new Date(1507231742263), 1],
[new Date(1507305748865), 1],
[new Date(1507455848163), 1],
[new Date(1507612393800), 1],
[new Date(1507825666582), 1],
[new Date(1507881840738), 1],
[new Date(1507921803759), 1],
[new Date(1508001467740), 1]
]);
var options = {
title: 'Statistics',
explorer: {
actions: [
'dragToZoom',
'rightClickToReset'
],
maxZoomIn: 0.001
},
hAxis: {
gridlines: {
units: {
years: {format: ['y']},
months: {format: ['MMMM']},
days: {format: ['E, d. MMM']},
hours: {format: ["HH:mm 'Uhr'"]},
minutes: {format: ["HH:mm 'Uhr'"]}
}
},
minorGridlines: {
units: {
days: {format: ['d. MMM']},
hours: {format: ["H 'Uhr'"]},
minutes: {format: ['HH:mm']}
}
}
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
The problem is I just can't figure out, if or how the data can be joined/stacked in an specific zoom level.
An alternative way I'd like to avoid is to create up to 4 charts for year, month, day and hour and let them visually be swappable by using a selection box.
One way you can do this is to have your zoom level be how many datapoints you want to show per pixel. The following examples uses the average in the sample range but you could take peak value or whatever works for your application.
This scales well to huge arrays as the number of data points you have is always equal to width and maximum complexity is width * resolution. If you always want to take all the datapoints just set resolution to a high number (or leave it out)
function getSampledData(data, zoomLevel, scrollPosition, width, resolution) {
const sampledData = [];
const skip = Math.max(1, zoomLevel / resolution);
// iterate over each pixel of chart width
for(let i = 0; i < width; i++) {
let total = 0;
// scrollPosition is the start pixel position of virtual scroll
let startPoint = (i * zoomLevel) + (scrollPosition * zoomLevel);
// zoom level is how many data points you want to show per pixel
for(let j = startPoint; j < startPoint + zoomLevel && j < data.length; j += skip) {
total += data[j];
}
sampledData.push(total / resolution);
}
return sampledData;
}
I am trying to make a countdown clock until the inauguration on January 20, 2017 at approximately 12:00pm using flipclock.js
How do I calculate the difference (in seconds) between the current time and that date/time?
I currently have:
var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = inauguration - now;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
Got it working:
var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
var now = Date.now();
var diff = inauguration.getTime() - now;
diff = diff / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
Currently inauguration is a Date object. You can get the number of seconds by .getTime() function. You need to change:
var diff = inauguration.getTime() - now;
//---------------------^^^^^^^^^^
Your working code should be:
var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
var now = Date.now();
var diff = inauguration.getTime() - now;
diff = diff / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
The idea of getTime() was part of the solution, and along with a couple of other minor changes the above code is now working.
Also, the original implementation works as well:
var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = (inauguration.getTime() - now) / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div id="clock"></div>
Below is the code I got from this site. THANK YOU. but everytime the page is loaded it plays the audio file any time after 16:24. Is there a way to prevent this?
var now = new Date();
var audio1 = new Audio('one_minute_remaining-2.mp3');
var millisTill10 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 24, 00, 0) -now;
if (millisTill10 < 0)
{
millisTill10 += 1000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function(){audio1.play()}, millisTill10);
var now = new Date();
var audio1 = new Audio('one_minute_remaining-2.mp3');
//Change the hours, minutes, seconds to the time you want it to play
var timeIWantItToPlay = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
16, 24, 00, 0
);
//This is the "exactness" of the time. So if it's within 1 second, it will play
var leeway = 1000;
if ( ( now.getTime() > timeIWantItToPlay.getTime() - leeway ) && ( now.getTime() < timeIWantItToPlay.getTime() + leeway )
{
audio1.play();
}
I'm building a bar chart using dc.js, and want the x-axis to list the 12 months of the year.
So far, I have it rendering showing the first tick as a time of day (06 PM), and all subsequent ticks as decimals (thousandths).
I saw a similar question (https://stackoverflow.com/questions/21392997/dc-js-x-axis-hour-labels-appear-as-thousandths#=), but the answer involved converting milliseconds to larger units, which isn't possible with months (that I know of).
Here is my code. Thanks in advance for the help.
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.weekStart);
d.month = d.date.getMonth();
});
var monthDim = ndx.dimension(function(d) {return d.month;});
var milesByMonth = monthDim.group().reduceSum(dc.pluck('miles'));
//set range for x-axis
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
var barChart = dc.barChart("#myBarChart");
barChart
.width(800).height(200)
.margins({top: 10, right: 10, bottom: 20, left: 60})
.dimension(monthDim)
.group(milesByMonth)
.gap(40)
.transitionDuration(1500)
.yAxisLabel('Miles Per Month')
.renderHorizontalGridLines(true)
.x(d3.time.scale().domain([minDate,maxDate]))
//.x(d3.scale.ordinal())
//.xUnits(dc.units.ordinal)
//.x(d3.time.scale().domain([new Date(2012, 0, 1), new Date(2012, 11, 31)]))
//.round(d3.time.month.round)
.elasticX(true)
.elasticY(true);
You are using the month number for your dimension key, but dates for your x domain. I would suggest always using dates as your dimension key, but using months as your group key, so that it bins by month but doesn't lose the rest of the information.
var milesByMonth = dateDim.group(function(d) {return d.month;}).reduceSum(dc.pluck('miles'));
barChart.dimension(dateDim)
You should be able to use the axis .tickFormat() with d3.time.format to get the months printing.
Something like
var xAxis = chart.xAxis().tickFormat(d3.time. format('%B');
https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat
https://github.com/mbostock/d3/wiki/Time-Formatting
You may also need to specify
chart.xUnits(d3.time.months)