nvd3.js

I have several different NVD3 charts that I call upon in the same svg. I use buttons to call functions, each containing a new chart that uses its own data. Is there a way to clear my single svg without deleting it? I wish to press a button to call my chart, but clear the svg before the new chart is loaded. It's not an issue when using the kind of chart... calling two multibarhorizontal charts, for example, just updates the shapes, which is fine. The problem is loading two different charts, like a line and a bar. Thanks in advance EDIT - The answers must be something like d 3.select("svg")

how is the date (x xAxis) formatted as "1025409600000"? I have been studying their documentation but can not figure how this works, it would make my life easier if someone would help me to understand how to change this to a 'normal' date format, like MMDDYYYY This is the chart: http://nvd3.org/ghpages/stackedArea.html Documentation: https://github.com/mbostock/d3/wiki/Time-Formatting Thanks I've interpreted your question as how does 1025409600000 get formatted to MMDDYY as that's what's happening in the NV example. In the example you pointed to the x axis has the dates almost in the format you

I'm usuing the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/ghpages/examples.html I want to be able to choose a specific x range for the graph to be focused on at load. I thought there would be a variable in chart that I could set to accomplish this. Suppose there's only one graph generated by nvd3 on the page: chart = nv.graphs[0] // how to choose the graph by DOM id? chart.brushExtent([10,20]) chart.update() Thank @elsherbini's comment. The solution provided here no longer works with the newest version of NVD3. Instead, you can use the following when you

I'm making an NVD3 line plot that will have significantly improved clarity if I can get markers to show for each data point instead of just the line itself. Unfortunately, I haven't been able to find an easy way to do this with NVD3 yet. I also considered using a scatter plot, but I couldn't figure out how to show connecting lines between the points. A third option I considered was to overlay a line and scatter plot, but this would show each series twice in the legend and may cause other unnecessary visual complications. Is there a way to elegantly pull this off yet? Sample code of my

I have a strange issue with showing dates on a xAxis. I am generating data like this: for (i=0;i<12;i++){ date=new Date(2013,i,1); ideas.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date}; } In my lineChart I want to create the x-axis like this: chart.xAxis.tickSize(12) .tickFormat(function(d) { var date = new Date(d); testarr.push(date); return d3.time.format('%b %y')(date); }); Now if I look at the chart, there are only a few Dates visible. This is why I created the array "testarr" for degbugging issues. The content of testarr is 8 Dates instead of 12 (i generated 12) Now the even

I'm using nvd3, but I think this is a general d3.js question about time scale and formatting. I've created a simple example that illustrates the problem (see code below): If I omit .tickFormat for the xAxis, it works fine without date formatting. With the example below I get the error: Uncaught TypeError: Object 1326000000000 has no method 'getMonth' nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .axisLabel('Date') .rotateLabels(-45) .tickFormat(d3.time.format('%b %d')) ; chart.yAxis .axisLabel('Activity') .tickFormat(d3.format('d')); d3.select('#chart svg') .datum

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 want it to show the bubble name. For example, each of my bubbles represents a country (which has a name),

I'm trying to set the width and height of a nvd3 multi bar chart programmatically using chart.width(600); chart.height(400); See the example here: http://jsfiddle.net/hPgyq/20/ As you can see this really messes up the chart. I know I can do this is CSS with: #chart svg { width: 600px; height: 400px; } but I thought this was also possible using the width() and height() functions on the chart. Am I doing something wrong here or am I mis-using the two functions? shabeer90 Yes it is possible, like you have specified the width & height of the chart, you have to use the d3.select and set its width &