nvd3.js

How to plot time on the X-axis in non-ugly mode?

廉价感情. 提交于 2019-12-31 05:45:09
问题 This is ugly : I need something that is not ugly. Time series are very usual, but I not see how to build a "plug and play" chart with ISO dates. Perhaps an equivalent question is "How to use d3-scalelinear/Non-numeric range/Date with NVD3?" (or d3-scaletime) Notes This is the main code: nv.addGraph(function () { var chart = nv.models.discreteBarChart() //.x( d=> d.label ) // very Ugly! .x( d=> { let dd = new Date(d.label); return d3.time.format('%b %d')(dd) }) // Ugly, because need to jump

How to set the domain and scale on an yaxis on a discreteBarChart nvd3.js

强颜欢笑 提交于 2019-12-30 18:48:08
问题 I'm using d3.js charts in one of my applications. Here they are in this image See Charts For Y axis on Money chart (See in the Image), I want maximum value rounded to 400, no matter what maximum bar size is here it is $358.72, but I want to keep bar at 358.72 but on Y Axis it would be 400 Limit. Code for it is here tradesChart = [ { key: "Cumulative Return", values: [ { "label" : "6E", "value" : 100 }, { "label" : "NG", "value" : 100 }, { "label" : "TF", "value" : 67 } ] } ]; nv.addGraph

How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3

本秂侑毒 提交于 2019-12-30 10:27:10
问题 How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted: as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html However when i hover over these ticks they are misaligned as shown: thats where the graph line should be and thats

How to disable legend in nvd3 or limit it's size

本小妞迷上赌 提交于 2019-12-28 14:22:10
问题 I'm using nvd3 and have a few charts where the legend is much to large. E.g. a scatter/bubble with 15 groups and the group names are long. The legend is so large that it leaves almost no room for the chart itself. Is there a way to remove the legend or toggle the legend or limit the height/width it is taking up? Any example would be great. Also, is there a way to have the bubble show a descriptive string? Right now when you stand on top of a bubble it highlights the x/y coordinates. I also

nvd3 Stacked Bar Chart with discrete values

六眼飞鱼酱① 提交于 2019-12-28 11:46:09
问题 I am trying to use nvd3 to create a vertical stacked bar chart. I will be using discrete data values, as opposed to randomly generated values as the example on their website. I have tried to play around with the live code example of the Group / Stacked Bar Chart and put in JSON data containing my own values. What I tried to do was take the JSON data from the horizontal bar chart and put it in as the data for the vertical bar chart. This is the data I used on the live code example in place of

JSON data format in NVD3 chart

我的梦境 提交于 2019-12-25 16:10:21
问题 I have a chart template for a multi bar chart in NVD3 here: http://jsfiddle.net/hohenheim/6R7mu/5/ I have the following JSON data I want to display: [{"date": 1396828800, "impressions": 49145385}, {"date": 1396915200, "impressions": 46704447}, {"date": 1397001600, "impressions": 47181000}, {"date": 1397088000, "impressions": 47337965}, {"date": 1397174400, "impressions": 51129266}, {"date": 1397260800, "impressions": 60547397}, {"date": 1397347200, "impressions": 62217077}, {"date":

JSON data format in NVD3 chart

孤街醉人 提交于 2019-12-25 16:10:08
问题 I have a chart template for a multi bar chart in NVD3 here: http://jsfiddle.net/hohenheim/6R7mu/5/ I have the following JSON data I want to display: [{"date": 1396828800, "impressions": 49145385}, {"date": 1396915200, "impressions": 46704447}, {"date": 1397001600, "impressions": 47181000}, {"date": 1397088000, "impressions": 47337965}, {"date": 1397174400, "impressions": 51129266}, {"date": 1397260800, "impressions": 60547397}, {"date": 1397347200, "impressions": 62217077}, {"date":

NVD3 stacked bar chart option not working

此生再无相见时 提交于 2019-12-25 08:26:39
问题 I am trying to create bar chart using nvd3 data. Grouped option is working fine but when I select Stacked it gives following error. Uncaught TypeError: Cannot read property '1' of undefined(…) JSON format is as below. var test = [ { "key":"A", "values": [ {"x":"2016-11-24","y":34}, {"x":"2016-11-25","y":10} ] }, { "key":"B", "values": [ {"x":"2016-11-25","y":15} ] }, { "key":"C", "values": [ {"x":"2016-11-28","y":11} ] }, ] javascript code: var chart; nv.addGraph(function() { chart = nv

How can I add a tabindex attribute to an nvd3 pie chart?

淺唱寂寞╮ 提交于 2019-12-25 04:43:23
问题 I have a basic pie chart with 3 wedges. When you click on a wedge of the pie, a tooltip will display. My intent is to have the same functionality for a keydown event. Scenario: When a pie slice has focus, a user can hit a key (ex: enter) which will display the tooltip exactly how the click event does. I figured this will require 2 steps. Make each pie wedge (.nv-slice) focusable by adding a 'tabindex = 0' attribute Add an event listener that triggers the tooltip similar to how a click event

nvd3 + lineplusbarchart + allign axises

混江龙づ霸主 提交于 2019-12-25 04:26:43
问题 not sure if I am going about this the right way but here goes... So i have the this example see fiddle here using lineplusbarchart and i am building on it from this question i posted here: SO question I have edited the lineplusbarchart to show the labels on the xaxis: chart.xAxis.tickFormat(function(d) { var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; return dx; }) .showMaxMin(false); but i am still having a couple of issues to get what i want... 1 -> how can i make the y1 and