score:1
Accepted answer
What I did wrong is giving the date string instead of date obj.
So I split the JSON and create date object using date string for the x-axis labels. like below.
new Date(dateStr)
Now it is working fine
score:1
There are two things:
- you can setup the ticker;
- and you can convert your value from a random string to something NVD3 understands
If you provide a String on the X-axis, NVD3 doesn't know how to order it, so a Date object is required. You can setup your chart like this:
chart.xAxis
.x(function(d) { new Date(d.x) }) // this convert the data object
.axisLabel('Date')
.tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); }); // this convert the ticker
Source: stackoverflow.com
Related Query
- How Can I display dates on the x-axis using nvd3 line charts
- How do I display dates on the x-axis for nvd3 / d3.js?
- New to nvD3 - how can I make my unix timestamps appear as dates on the x-axis?
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- How can I draw a continuous line using d3 without needing to click&drag the mouse, but rather just use the mouseover event?
- How to fix d3.js axis mis match when using clip paths for linear filtered line charts
- How can I put a space between the lines of a line chart using d3.js
- How to get a dashed line on Y axis and how to display the value beside the graph in d3
- How can I connect a circle to a path with a line that is perpendicular to the x axis to create an "error line"?
- How can I get the D3.js axis ticks and positions as an array?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Using d3.js, how can I display data faster on my chart?
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- How to display the value for the final tick on axis in D3?
- How to draw logarithmic line charts with nvd3
- How can I set the each line color or width in SVG path
- How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3
- D3.js - How can I add a new line to the text in this Collapsible Tree?
- How can I display a placeholder image in my SVG until the real image is loaded?
- How can I achieve the R kernel density estimate plot using D3.js?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How can I remove a line from the 110m TopoJson world map?
- How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?
- How to display the percentage % on a NVD3 Pie Chart?
- dimple.js How can I change the labels of a chart axis without changing the data?
- NVD3 line chart display X axis
- How can I color one Y-axis line different from the other grid-lines?
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
More Query from same tag
- C3js and D3js Error: Invalid value for <g> attribute transform="translate(0,NaN)"
- How to change text elements in d3?
- How to create multi-polygon intersecting a circle / necklace using d3.js?
- How to get the axis ticks of Plotly's scatter plot to be shown in Latex using Python? --- [Python, Plotly, Latex Representation]
- Uncaught SyntaxError: Unexpected token . D3 Tooltips
- d3 in Vue application - How to apply zooming on a map
- select data based on multiple attributes d3
- Separating D3 pie charts within a table
- Export D3 Svg charts(i.e 5 charts in a Page) into single Image
- How to Integrate a data-driven d3JS graph with Shiny?
- How to change the X-axis line from top to bottom in d3.js
- Update d3.js data with setInterval, not xAxis labels update
- d3 drag blurring/jittery handle
- Sortable Bar Chart Not Working
- Update a d3.js multiline graph on submit event of a html form using jQuery
- How can I fix my chart so that the scale of the x axis is defined by a group of labels?
- Wrong item "clicked" when using the "click" event on a SVG circle using D3
- D3 stacked segment chart, sort by totals
- What exactly does .selectAll() do?
- transition from a line from the start point to the end point in d3.js
- Represent the same item twice in a D3 visualisation
- When to use duration vs delay in d3
- d3.js - How can I expand force directed graph horizontally?
- On button click open a new window and draw multiple large circles with D3
- 404 error trying to parse csv with javascript/D3
- Can I define a max number of ticks in a d3.js axis?
- d3 doesn't append circles on first run
- Rotate x axis text on Horizontal bar chart
- D3js Updating path parse error will breaking path for while
- crossfilter2__WEBPACK_IMPORTED_MODULE_3__ is not a function