nvd3.js | 易学教程

NVD3 - configuring ticks on axis

阅读更多关于 NVD3 - configuring ticks on axis

问题 I have a nvd3 line chart which displays a time series and can't get the ticks on the x axis right. For longer time spans, it works as expected. But for shorter time spans (here: 12/31/05 to 01/01/06), the same date is displayed for multiple ticks: Please have a look at the code for this chart on JSFiddle I want the chart to only display ticks at data points, and not in between. Is that possible with a line chart? From my understanding, it is possible with d3, but I can't figure out if this

How to set a nvd3 axis to use strings instead of numerical values ?

阅读更多关于 How to set a nvd3 axis to use strings instead of numerical values ?

问题 Instead of numerical values on the x-axis, i want to set my attribute names. I am no Javascript hero. I am using the scatter Chart. I believe it should be something like : chart.xAxis.tickFormat(d3.format(String)); and then i can set: chart.xAxis .axisLabel('Attributes').staggerLabels(true).tickValues(["A", "B", "C"]);; and then set the values: data[i].values.push({ x : "A" , y : 29.765957771107, size: Math.random(), shape: shapes[j % 6] } , .. How to see my attributes "A", "B", etc on the x

I am trying to pass a json file generated with a webservice to an NVD3 graph

阅读更多关于 I am trying to pass a json file generated with a webservice to an NVD3 graph

问题 I have posted a similar question. I am relatively new to ASP.NET and webservices. Thanks to the online community, I was able to attempt linking my webservice to my NVD3 stackArea graph. Everything works when I first save the json file then use it on my webform. However, I want to link the entire process. I feel that I am very close and would greatly appreciate the community's feedback. Here is my webform: <!DOCTYPE html> <html> <head> <title></title> <link href="css/nv.d3.css" rel="stylesheet

NVD3 multi bar horizontal chart x axis domain

阅读更多关于 NVD3 multi bar horizontal chart x axis domain

问题 How can I set my domain to [0,400] with nvd3? Here is my code: var chart; nv.addGraph(function() { chart = nv.models.multiBarHorizontalChart().x(function(d) { return d.label }).y(function(d) { return d.value }).margin({ top : 30, right : 20, bottom : 50, left : 175 }).barColor(d3.scale.category20().range()).transitionDuration(250).stacked(true) chart.yAxis.tickFormat(d3.format(',.2f')); d3.select('#chart1 svg').datum(long_short_data).call(chart); nv.utils.windowResize(chart.update); chart

Angular nvd3 interactive guideline show too much data

阅读更多关于 Angular nvd3 interactive guideline show too much data

问题 I am creating a line chart with 3 lines. First line has data from dateA to dateB Second and third lines have data from dateB to dateC The problem is linked to the interactive guideline. When the mouse is over the first line (dark blue) it should only display the value of this line. For the moment, it display all the values How can I display only the value when there is one ? 回答1: Not the perfect solution, but you can fill the values of the 1st line with null value from dateB to dateC See this

Displaying Relative Time on x-axis with d3.js

阅读更多关于 Displaying Relative Time on x-axis with d3.js

问题 I'm trying to use nvd3.js to display ratings over time (in near real time; the data updates every 3 minutes). Right now the data appears to be showing correctly except the x-axis displays epoch time which isn't very readable. How can I have the x-axis display "x Minutes Ago" rather than the epoch time? Here is the code that I am using: nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .axisLabel('Time') .tickFormat(d3.format('r')); chart.yAxis .axisLabel('Rating')

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... 回答1: 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

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,

nvd3.js - Bigger points in a line chart

阅读更多关于 nvd3.js - Bigger points in a line chart

问题 I am searching how to show bigger points in a line chart using nvd3.js, but I haven't found anything. Anybody can give me a hand? I want the points to be easily visible across the chart lines. Thanks. 回答1: After looking through the output generated in the simple line chart, you could add this CSS, to make all points visible: .nvd3 .nv-groups .nv-point { stroke-opacity: 0.5 !important; stroke-width: 10px; } This is, however, more like a hack. There should be better solutions around. If you

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