Tradingview lightweight chart showing invalid date in Safari - javascript

I'm trying to get a lightweight chart from Tradingview working in Safari, but it's only working in Chrome and Firefox browsers. In chrome it shows a moving line while in Safari it only shows a straight line and "invalid date".
function setChartData(dates, chart_data) {
var chart = LightweightCharts.createChart(document.getElementById("chart"), { width: 946, height: 710,
localization: {
timeFormatter: businessDayOrTimestamp => {
return Date(businessDayOrTimestamp);
},
},
});
The code can be found here in a JSFiddle:
https://jsfiddle.net/mideruit/xpyrd4L2/

The problem seems to be the date format, Safari requires the date format to be yyyy/mm/dd HH:MM instead of yyyy-mm-dd HH:MM:SS

Related

Intl.DateTimeFormat format different in Chrome vs Safari for French format

The following code snippet gives a different result in Chrome vs Safari
new Intl.DateTimeFormat(
'fr-CA',
{ hour12: false, hour: 'numeric', minute: 'numeric' }
).format(1568234174749)
On Safari the result is 16:36 which is incorrect
On Chrome the result is 16 h 36 which is correct
How do I get the desired result?
My app is a react-native application.
On Android, react-native uses Chrome for this so the results are correct
On iOS, react-native uses Safari for this so the results are incorrect

Chrome Date/Time parsing breaks in Mac & Mobile devices, Works fine in windows chrome

I have issue while parsing the date/Time in Mac and mobile devices.
new Date("2018-12-16T00:00:00")
new Intl.DateTimeFormat("de").format(new Date())
new Intl.DateTimeFormat("de").format(new Date("2018-12-16T00:00:00"))
Following code works fine in windows chrome browser, but fails to work in Mac chrome browser.
In Mac i have tested with safari, it works fine.
Getting error as "RangeError : Invalid time value"
I know its not a ISO standard format, to avoid locale issue we have made this custom format to work in all locale.
Now its works in Windows chrome and failed in "Mac Chrome"
Problem resolved
export const localeDay = (date, languageCode) => {
try {
if (new Date(date) instanceof Date && !isNaN(new Date(date))) {
return new Intl.DateTimeFormat(languageCode).format(new Date(date));
}
return null;
} catch (error) {
logger(error.toString());
}
};

JQuery FullCalendar rendering events on wrong day in month view

EDIT TL;DR:figured out what was causing the problem temporarily, IE compatibility mode breaks this plugin (v2.5) in IE10 10.0.34
EDIT: I'm a noob it's IE10. Even considering I'd turned off drag and drop and editing IE10 is building it wrong somehow. I do almost all my testing in IE10 as it is the mandated browser for in house web apps, fullcalendar shows IE8+ compatibility on their page so I hadn't tested it across browsers until just now out of desperation/rage. Has anyone had issues with this? Any ideas how I can fix it or how to go about maybe tracing the problem? It's a bit out of my wheelhouse but I want this thing to work and by the Gods I will make it work or die trying.
I was attempting to use fullcalendar as part of a front end for a simple display. The web application is served with Oracle Portal which may have some bearing.
Here is the calendar initialization script, it binds to a div so nothing fancy:
<script>
$(document).ready(function() {
var events = [];
var e = {}
<%FOR event_rec in month_events LOOP%>
e = {
id: "<%=event_rec.event_id%>",
title: "<%=event_rec.event_name%>",
start: "<%=event_rec.event_day%>T<%=to_char(event_rec.start_hr,'FM00')%>:<%=to_char(event_rec.start_min,'FM00')%>:00",
end: "<%=event_rec.event_day%>T<%=to_char(event_rec.end_hr,'FM00')%>:<%=to_char(event_rec.end_min,'FM00')%>:00",
description: "<%=event_rec.notes%>"
};
events.push(e);
<%end LOOP;%>
$("#calendar").fullCalendar({
header: {
left: "prev,next",
center: "title",
right: "month,basicWeek,basicDay"
},
titleFormat: 'MMMM D, YYYY',
buttonText: {
prev: 'Previous',
next: 'Next'
},
defaultDate: "<%=v_default_date%>",
editable:false,
allDayDefault:false,
eventStartEditable:false,
eventDurationEditable:false,
eventLimit:true,
eventOrder:"start",
dayClick: function(date, jsEvent, view) {
//Open day by clicking on tile
$('#calendar').fullCalendar( 'gotoDate', date );
$('#calendar').fullCalendar( 'changeView', "basicDay" );
},
timezone : 'local'
});
$('#calendar').fullCalendar('addEventSource',events);
});
Those <%= %> tags denote where it's calling the faux code behind that is oracle portal, it is looping through a small cursor which yes, is less than an ideal way to do this but it is all I can do.
It looks like this on page load/render:
e = {
id: "1",
title: "Test Event 1",
start: "2015-12-10T11:00:00",
end: "2015-12-10T14:00:00",
description: "Testing Notes"
};
Now for the fun part:
Image
See those days circled in red? Those days have no events, all the events are on the 10th and 12th. I cannot for the life of me figure out why these events are displaying in the wrong days. First thought was a data issue with that array I'm filling, like something was typed wrong or formatted wrong but all the dates have identical start/end times as I didn't changed those values at first when making test cases.
Any ideas? I'm completely out of them. Usually in these situations it's something small I overlooked, and as soon as I ask for help I spot it. I'm banking on this, or someone smarter than I to spot the screw up.
Compatibility mode in IE10 (10.0.34) breaks the fullcalendar app (or JQuery) from version 2.5, making events render on the wrong date cells in month view but remain correct in date or week views.
Turning it off solved my issue at least for the time being (if you are running legacy apps that require compatibility mode for some cases in a hodgepodge of outdated spaghetti code from hell like I am, this may not be a viable long term fix)

Flot Graph is not showing when using time in xaxis

I'm trying to use flot to graph data and have the time for data along the x axis. The graph works fine until I add time mode in the options. Everything I've seen says the problem is the time stamp but I've converted it to the Javascript time stamp. Here is the code I have.
var data = [[1272701100000,2.475],[1272701400000,2.475],[1272701700000,2.475],[1272702000000,2.7],[1272702300000,2.745],[1272702600000,2.7],[1272702900000,2.565],[1272703200000,2.475],[1272703500000,2.385],[1272703800000,2.52]];
var options = {xaxis: {
mode: "time"
}};
$.plot("#placeholder",[data]);
Works fine when you include the Flot time plugin: updated fiddle
Error was in the console:
Error: Time mode requires the flot.time plugin.

Google calendar feed not showing events

I have a public google calendar. The feed tests okay, but I can't get the events to show up in fullcalendar. My feed IS the XML feed for sharing. I've read similar posts but they didn't help.
http://drcraigjohnson.net/fullcalendar-1.5.3/demos/theme.html
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: 'https://www.google.com/calendar/feeds/jl2um2s9odbrtj7lt3bn9817vg%40group.calendar.google.com/public/basic',
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
},
});
});
I was not able to test this with jsfiddle - I guess I don't have access to your Google Calendar. Anyway, a couple of things you might correct here:
Remove the HTML comment from the JavaScript section! The one which starts with <!-- in the script tag
You have an extra comma after the eventClick callback - remove that. That should have thrown a syntax error for you though. Your JS wont run with syntax errors.
Try checking your API calls with browser tools (Chrome Dev tools or Firebug) to debug further.
Oops! Make sure google calendar "Share only my free/busy information" is unchecked. Tested by using a known working feed, i.e. google holiday xml which worked. Then i knew it something re: my feed. Thanks again. Problem solved!!!

Categories

Resources