nvd3.js | 易学教程

Donut Pie Chart - Add a Title - NVd3.js

阅读更多关于 Donut Pie Chart - Add a Title - NVd3.js

I'm exploring the NVD3.js library. It amazes me how quickly things can be produced in it. But it seems like it's difficult to alter the chart sometimes. In this case, I would like to add a title to my chart . The other thing, I would like to add additional data in the tool-tip . So on hover, It would also include the note in my data. Data sample: var data = [ { key: "Loans", y: 52.24 note: "Expect greatest value" }]; This is the code I'm playing with: nv.addGraph(function() { var width = 500, height = 500; var chart = nv.models.pieChart() .x(function(d) { return d.key; }) .values(function(d) {

nvd3 Chart - xAxis label

阅读更多关于 nvd3 Chart - xAxis label

How we align the long xAxis labels in zig zag manner? (Don't use rotateLabels), Or Is there any possibility to text wrap for those long xAxis labels in nvd3 charts? Please find attached images for reference... Actual Image with - Issue Expected Result - 1 Expected Result - 2 Thanks in advance... Christopher Chiche For expected result 1: You can add the following option: .staggerLabels(true) as you can see here . For expected result 2: You will have to do it manually on your data by replacing the space by a new line before using it in the chart. You can also have a look at d3 string formatting

nvd3 formatting date returns always 1970-01-01

阅读更多关于 nvd3 formatting date returns always 1970-01-01

I'm trying to build a line chart using nvd3 for d3js but I've got some problems using a date domain on the x axis. Here's my code: data_lineChart = [ { "key" : "key1", "values" : [ { "x" : "2014-04-20", "y" : -6 }, { "x" : "2014-04-13", "y" : -5 }, { "x" : "2014-04-06", "y" : -1 }, ] }, { "key" : "key2", "values" : [ { "x" : "2014-04-20", "y" : 6 }, { "x" : "2014-04-13", "y" : 5 }, { "x" : "2014-04-06", "y" : 1 }, ] } ] nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d)) }); chart.yAxis .tickFormat(d3

How to correctly centre text element on all bars of a nvd3 bar chart

阅读更多关于 How to correctly centre text element on all bars of a nvd3 bar chart

I want to display the y-axis values of a nvd3 barchart on each individual bar. I can display the values, but I do not know how to set the height of the text element to be at the centre of each bar without hard coding the value. I use d3.selectAll(".nv-bar") to select each bar,but this does not have an height attribute ( as far as I can see). "discreteBar" has a height, but I cannot get in an d3.select() I appreciate any help <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax

x-axis dates don't align with y-axis data in nvd3

阅读更多关于 x-axis dates don't align with y-axis data in nvd3

I am using NVD3 with Flask and I have dates on the x-axis. As you can see the lines on x-axis don't coincide with the points. I printing out the day, month, year and hours on the x-axis. I don't understand why the dates are not equally spaced i.e the 'hours' are not the same even though my x-axis data is, so that the lines are more than "24 hrs" apart. I think this is causing the problem. (Edited) My code is: nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) } ); chart.yAxis .tickFormat(d3

How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?

阅读更多关于 How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?

I'm trying to add some space/padding for a nvd3 multi bar chart. "groupSpacing" is not what I need, since it only adds space between groups. I'll need space between each bar inside group. I found one link in github support . Can you post any solution or tweak? I also found a d3 example of grouped bar chart . Any help in this example also very helpful to me. Thanks. I have draw a d3 group barchart: fiddle You can adjust the groupSpacing by change the code on line 56: var groupSpacing = 6; Technically i just achieve it by change the width of each rects' width: var barsEnter = bars.enter().append

NVD3.js (d3.js) Scale Break

阅读更多关于 NVD3.js (d3.js) Scale Break

问题 I want to create a chart with scale break on y axis. I don't want to use a non-linear scale but using a scale break make lower values more visible when having data anomalies. What is the best way to implement that in nvd3 or in general in d3? 回答1: Lacking other options I created a brute force solution, manipulating the vertical <path> of the Y axis. Using pseudo code, you use it like this: var domainPath = yAxis .select('path.domain'); domainPath.attr('d', breakScale(domainPath.attr('d'), 14,

NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

阅读更多关于 NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

I'm using the NVD3 library to make simple line charts based on data generated in a Rails controller. The code I'm using to generate data in Rails is: task.task_values.each do |u| array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i }) end data_label = task.name + " ("+ task_unit +")" taskValuesList = [{:key => data_label, :values => array}] data = {:type => "line", :data => taskValuesList} Then, in my view, I have the following JS code: nv.addGraph(function() { var chart = nv.models.lineChart() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); chart.xAxis .showMaxMin

How to set custom width of bar in NDV3 Discreate bar chart

阅读更多关于 How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts. Problem : If chart has single record, bar width reaches 3/4 of the chart width. Question : How to change width of the bars in Discrete bar chart? Have attached chart please guide me.. If you look at the source here . You'll see that the width of the rectangle is calculated based on the number of items using rangeBand . There doesn't appear to be a way to set the width of the rectangle though the library's API. If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that

NVD3 Stacked Bar Chart Plus Line Overlapped

阅读更多关于 NVD3 Stacked Bar Chart Plus Line Overlapped

问题 I'm using NVD3's MultiChart to create a stacked bar chart plus line. I modified the multiChart models a bit to make the bars become stacked. Now the problem is that the lines are at the back of the bars such that I cannot hover over the lines to see the tooltip for line. Is there any options in NVD3 to bring the lines to front? I created the JSFiddle here: http://jsfiddle.net/n2hfN/50/ Javascript source: var margin = { top: 50, right: 50, bottom: 120, left: 70 }; var svg = "#chart svg"; var