score:4
I have finally found the answer, for safari, the date time format needs to be as follows in your json
%Y-%m-%dT%H:%M:%S
This question I found lead me to the answer Safari Javascript Date() NaN Issue (yyyy-MM-dd HH:mm:ss)
score:0
A few things I noticed when playing with your code.
In parts of your dataset for key: 'Upload'
you have got the the values for 'x'
inside single quotes, would be good to keep it consistent in your dataset. I normally DO NOT use the single quotes for x
.
The reason you are getting 0NaN is because you are passing the date as a STRING and NOT a DATE object.
So here is what I added to your code :
var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart
// Convert the date passed as a STRING into a DATE object
chart.x(function(d) {
return new Date(d.x);
});
Here is a working version of your code here.
I would suggest formatting your dates in the X Axis to avoid them overlapping with each other. You can find more about time formatting using d3.js here
UPDATED working version with your code here
To fix the NaN issue on Safari browser you can format the time accordingly
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%Y-%m-%dT%H:%M:%S')(new Date(d));
});
Hope this helps
Source: stackoverflow.com
Related Query
- NVD3 - line chart NaN on safari using latest versions
- NVD3 Line Chart doesn't display when data passed using ajax - data.map is not a function
- Multi line chart using d3 and json in a nvd3 structure
- Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data
- Line chart using nvd3
- Aw snap in Google Chrome when interactive line chart using nvd3 + angular library
- nvd3 line chart with string values on x-axis
- NVD3 line chart with realtime data
- javascript charting - nvd3 line chart with two Y-axis
- NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined
- NVD3 line chart with vertical line
- NVD3 Line Chart X Axis Ticks Are Missing
- Line chart using ordinal x-axis with d3.js and nvd3.js
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- Responsive pie chart using NVD3
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- nvd3 line chart not shown properly. (dots and shaded area)
- NVD3 line chart - legend text cut off
- NVD3 line chart display X axis
- d3 tooltip position issue in line chart using javascript
- NVD3 Stacked Bar Chart Plus Line Overlapped
- D3js - Getting a line chart drawn, from "JSON data" input using d3.json
- How to change color of line in line chart using dimple.js?
- How to create a % difference arrow line with value in a bar chart using D3.js
- Formatting nvd3 line chart axis
- nvd3 line chart automatically setting fill opacity
- How to place Circles(dots) in line chart using "d3.js " library?
- d3 line chart using a sorted data set
- Undesired shaded area when exporting NVD3 line chart to PNG
- Responsive line chart with transitions using d3
More Query from same tag
- D3.js charts - Show legend in two rows
- NVD3 max value on inverted yAxis
- react-d3 using dates as the x axis
- D3.js: Hover over animation map
- Increasing clickable area of an edge in D3 diagram
- Unable to get radius of circles in d3
- D3 Tree Layout Not Collapsing
- d3 flickering line on setInterval
- d3v4 bubble chart update
- How to merge paths with translate() values to a single one (D3 / SVG)?
- d3.js not rendering inline with Jade
- D3 js tooltip issue for Chloropleth Map
- update data of D3.js treemap
- D3: Assign ID to Voronoi polygons
- D3 Hierarchical Edge Bundling
- Merge objects that share a common value in D3
- Simple D3.js text selection
- d3.js How to draw stacked horziontal bars from array?
- d3.js data not bound the first time
- Filtering out elements before they are appended?
- Conflict between d3.forceCollide() and d3.forceX/Y() with high strength() value
- d3.js map inset (zoom)
- Given an object where the value is an array, what is the most efficient way to return the pair [key, array.length]?
- Fill a grid with empty rectangles in D3.js?
- D3 mouse-over of links in node-link diagram, increase 'accepted' range
- Keep position of D3 graph after updating data
- Typescript Type definition for d3 sankey
- D3 placing nodes labels inside circles in Mobile Patent Suits
- Multiple constructor implementations are not allowed
- Inline-Block error when using batik on NVD3 svg