Background: I'm trying to have 2-3 tabs which the user can select from (in an HTML page). The first tab is based on the sniffed language of the browser, and the user will have the possibility to also pick English or Norwegian.
Technical part: I create three calendars $('#datetimepicker*LANGUAGE*'),
$(function() {
$('#datetimepickerEN').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
formatTime: 'HH:mm',
step:15,
startDate: moment().toDate(),
minDate: moment().toDate(),
maxDate: moment().add(20, "days").toDate(),
});
$.datetimepicker.setDateFormatter({
parseDate: function(date, format) {
var d = moment(date, format);
return d.isValid() ? d.toDate() : false;
},
formatDate: function(date, format) {
return moment(date).format(format);
},
});
});$(function() {
$('#datetimepickerPL').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
formatTime: 'HH:mm',
step:15,
startDate: moment().toDate(),
minDate: moment().toDate(),
maxDate: moment().add(20, "days").toDate(),
});
$.datetimepicker.setDateFormatter({
parseDate: function(date, format) {
var d = moment(date, format);
return d.isValid() ? d.toDate() : false;
},
formatDate: function(date, format) {
return moment(date).format(format);
},
});
});
$.datetimepicker.setLocale('pl');
each attached to its correspondig input element
<input type="text" autocomplete="off" name="date" id="datetimepicker*LANGUAGE*" />
but upon setting the language, for example
$.datetimepicker.setLocale('pl');
the language of all three calendars are changed, which is logical because apparently I set the langue of only one instance $.datetimepicker. The question is now as to how I can address this issue. Do I need 3 different instances? (if yes, how?)
I want to sort my column by date:
var table = $('#table').DataTable({
"order": [[0, "desc"]],
});
But here is my result:
29.06.17
27.06.17
26.06.17
22.08.17
18.10.17
15.09.17
What I would expect is this:
18.10.17
15.09.17
22.08.17
29.06.17
27.06.17
26.06.17
June, then August, then September and then October....
I tested also:
"columnDefs": [
{ "type": "date-dd.mm.yy", targets: 0 }
],
But this didn't change anything.
dataTables date type uses Data.parse() which only supports a limited set of date formats. European style dd.mm.yy is not parseable thus the dates is alpha sorted.
You can deal with data attributes, i.e adding a data-sort="10/18/17" to each column, but I think it is easier to create a small plugin that return valid dates :
$.extend( $.fn.dataTableExt.oSort, {
"jarla-date-pre": function(a) {
a = a.split('.');
return new Date(a[1]+'/'+a[0]+'/'+a[2])
}
});
Use it like this :
columnDefs: [
{ type: 'jarla-date', targets: 0 }
]
demo -> http://jsfiddle.net/vad94dcs/
You need to use the render function which allows you to both format the date for display and use the raw date value for sorting.
The following code uses the moment.js javascript library to format the date.
{
data: 'DateField',
render: function (data, type, row) {
// If display or filter data is requested, format the date
if (type === 'display' || type === 'filter') {
return (moment(data).format("ddd DD/MM/YYYY (HH:mm)"));
}
// Otherwise the data type requested (`type`) is type detection or
// sorting data, for which we want to use the raw date value, so just return
// that, unaltered
return data;
}
},
Link to source at the datatables forum, here.
I have a MongoDB database with Laravel in Backend, I get the data from mongo and I out in to the highcharts, in Local it looks good:
But in remote with the same code looks like this:
And the console shows me the next error:
(14) highstock.js:8 Highcharts error #15: www.highcharts.com/errors/15
(8) highstock.js:8 Highcharts error #15: www.highcharts.com/errors/15
It's the same code, the same version of mongodb the sambe version of PHP driver:S
EDIT:
The jQuery code that I have:
$('#historic-graph').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'Gráfico Histórico'
},
series: [{
name: 'Dato',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
And the Data that I recieve:
[[1455839004000,130],[1455839006000,130],[1455839008000,133],[1455839011000,134],[1455839013000,133],[1455839015000,132],[1455839017000,134],[1455839020000,130],[1455839022000,134],[1455839024000,133],[1455839027000,134],[1455839029000,131],[1455839031000,134],[1455839034000,132],[1455839036000,130],[1455839038000,132],[1455839040000,134],[1455839043000,132],[1455839045000,133],[1455839047000,130]]
[TIME, VALUE]
The time is strtotime created_at * 1000 with php.
EDIT 2:
PHP code that I return with data variable in jQuery after ajax request:
foreach ($alldata as $item) {
$date = new Carbon($item['created_at']);
$date = $date->addHours(Auth::user()->utc)->timestamp * 1000;
array_push($data, array($date, floatval(round($item['value'], 2))));
}
I add an hour for users UTC timezone.
I have stock market data plotted over highcharts:
My JS Code:
$(function() {
$.getJSON('data.php', function(data) {
console.log(data);
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector:{
enabled:false
},
navigator: {
enabled: true
},
useUTC: false,
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
}
},
title : {
text : 'NSE Stock Price'
},
credits: {
enabled : false
},
series : [{
name : 'NSE Stock Prices',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
My JSON output (partial):
[["09:01:00",27966.96],["09:03:00",27934.64],["09:03:00",27934.64],["09:07:00",27952.66],["09:07:00",27952.66],["09:07:00",27952.66]]
I expect time from 9:00am to 4:00pm on x-axis but I am just not getting it.
I tried changing time to unix time changing date format useUTC to true but noting worked out.
Update:
Tried this format too,
[["2014-11-14 09:01:00",27966.96],["2014-11-14 09:03:00",27934.64],["2014-11-14 09:03:00",27934.64]]
Update 2
My PHP code,
$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);
Update 3: (some of the latest values)
[["2014-11-17 09:00:00",28065.72],["2014-11-17 09:02:00",28048.8],["2014-11-17 09:04:00",28041.93],["2014-11-17 09:06:00",28029.58],["2014-11-17 09:08:00",28018.68],["2014-11-17 09:10:00",28018.68],["2014-11-17 09:12:00",28018.68],["2014-11-17 09:14:00",28018.68],["2014-11-17 09:16:00",27988.73],["2014-11-17 09:18:00",28001.06],["2014-11-17 09:20:00",28003.06],["2014-11-17 09:22:00",27988.44],["2014-11-17 09:24:00",28011.67],["2014-11-17 09:26:00",27988.56],["2014-11-17 09:28:00",27991.17],["2014-11-17 09:30:00",27983.98],["2014-11-17 09:32:00",27972.01],["2014-11-17 09:34:00",27980.87],["2014-11-17 09:36:00",27994.42],["2014-11-17 09:38:00",28007.38],["2014-11-17 09:40:00",28005.57],["2014-11-17 09:42:00",27986.39],["2014-11-17 09:44:00",28010.79],["2014-11-17 09:46:00",27998.44],["2014-11-17 09:48:00",28012.66]]
This is as per: $array_item[] = array(strtotime($price_date), (float)$last_traded_price);
[[1416195000,28065.72],[1416195120,28048.8],[1416195240,28041.93],[1416195360,28029.58],[1416195480,28018.68],[1416195600,28018.68],[1416195720,28018.68],[1416195840,28018.68],[1416195960,27988.73],[1416196080,28001.06],[1416196200,28003.06],[1416196320,27988.44],[1416196440,28011.67],[1416196560,27988.56],[1416196680,27991.17],[1416196800,27983.98],[1416196920,27972.01],[1416197040,27980.87],[1416197160,27994.42],[1416197280,28007.38],[1416197400,28005.57],[1416197520,27986.39],[1416197640,28010.79],[1416197760,27998.44],[1416197880,28012.66],[1416198000,28018.49],[1416198120,28010.15],[1416198240,28028.18],[1416198360,28035.61],[1416198480,28024.87],[1416198600,28018.95],[1416198720,28007.81],[1416198840,28001.57],[1416198960,28006.85],[1416199080,27997.68],[1416199200,27993.06]]
The output: Still not giving perfect timings although not giving 00:00 as before.
The graph is breaking in middle.
Update 3:
PHP Code,
while ($stocks_bse_price->fetch())
{
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
}
JSFidle link: http://jsfiddle.net/Ywr3L/38/
Update 4:
Just realized its going wrong if figures for entire day is given as an input to array.
I have stored entire days data http://pastebin.com/NVAD5EyG
Update 5:
This is what I did in MySql query:
DATE_FORMAT(price_date,'%d-%c-%Y %r') as price_date
And then in PHP
$price_date = $price_date.' UTC';
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
Which is giving me this:
http://jsfiddle.net/rof96xuo/1/
[[1416301200000,28177.51],[1416301320000,28180.46],[1416301440000,28181.03],[1416301560000,28198.98],[1416301680000,28209.03],[1416301800000,28209.03]]
new Date(1416301200000)
Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)
As #RaeenHashemi is saying in the comments, highcharts expects datetime data to be in JavaScript epoch times (number of milliseconds since 1970/01/01). You are giving it a string representation of your datetime.
It looks like you are generating JSON from PHP. If so, modify the PHP to convert the time to epoch. If you have a DateTime object in your PHP use getTimeStamp:
$date->getTimestamp() * 1000; // unix timestamp to javascript millisecond timestamp
If you have date time strings in your PHP, convert it to a DateTime first.
I am using FullCalendar and populate the calendar from an ajax call.
But I can not get the times to display if the allday is set to false
I was looking at FullCalendar not displaying time from JSON events but did not seem to help.
This is the JSON I am sending back:
][{"id":"18","title":"r2222","start":"2012-10-02
08:00:00","end":"2012-10-02
11:00:00","textColor":"#000000","allday":false,"color":"#ffffff"},
{"id":"1","title":"Test
123","start":"2012-10-16","end":null,"textColor":"#000000","allday":false,"color":"#ffffff"},
{"id":"16","title":"happy
gallown","start":"2012-10-31","end":"2012-10-31","textColor":"#fffcfc","allday":true,"color":"#d92727"},
{"id":"17","title":"recur","start":"2012-10-03
19:00:00","end":"2012-10-03
21:00:00","textColor":"#000000","allday":false,"color":"#ff56ff"}]
allDay is case sensitive; change it from allday to allDay - I just spent 25 minutes myself hunting this one down.
You can follow this allday to allDay and Time should be start: 2010-01-09T12:30:00 need to add T between date and time .
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]