nvd3.js

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

由 ε祈祈猫儿з 提交于 2019-12-06 23:47:41
问题 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.. 回答1: 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

NVD3/D3 change y axis minimum value

由 江枫思渺然 提交于 2019-12-06 19:39:32
问题 I am currently using NVD3 to make a few line charts. I am wondering if it is possible to make the y axis ticks to always start from 0. Currently it always starts from the lowest y value. I have tried using tickValues but I do not want to change the other values. I have also tried to add a data point with a value of 0, but this seems like a workaround and it affects the way the graph looks. Any ideas? 回答1: You don't need to add a "dummy" data point, all you need is adjust the input domain of

nvd3.js : unable to bind onClick event with the data points in the svg

由 ￣綄美尐妖づ 提交于 2019-12-06 18:24:41
问题 I am trying to bind the datapoints with the onclick event, so that I could display a overlay box with some additional details and links. I'm using the .nv-point class to access the datapoints. The problem is that I'm unable to register the onclick event to those datapoints. Here is the code : d3.selectAll(".nv-point").on("click",function(){ alert("clicked"); //do something more }); Here is the demo in jsFiddle 回答1: You can easily attach a click handler to the "circle", or node point on a

Custom formatted JSON from MYSQL PDO for use in NVD3.js

由 旧巷老猫 提交于 2019-12-06 15:38:06
I would like to create custom formatted JSON to be used with NVD3.js, but am not sure how to create the nested arrays with PDO? Example data tables: +--------------+-------------------+---------------------+ | volume_name | volume_files_used | recorded | +--------------+-------------------+---------------------+ | content001 | 130435938 | 2014-08-22 13:20:44 | | content002 | 95977391 | 2014-08-22 13:20:44 | +--------------+-------------------+---------------------+ Using PDO and json_encode() : //JSON OUTPUT $stmtJSON = $pdo->prepare("SELECT volume_name, volume_files_used, recorded FROM

How to make nvd3 work in Internet Explorer 8?

由 时光怂恿深爱的人放手 提交于 2019-12-06 10:38:39
I am creating a dashboard project for which i am using nvd3 but as we know svg is not supported in IE8 so it does not render graphs/charts in IE8..please suggest how i can make nvd3 work in IE8 Gerard I'm in the same situation and I think I may just ditch nvd3 (besides no ie8 support, I'm finding other bugs). I'm wondering, has anyone successfully used r2d3 with nvd3? My concern is that r2d3 uses d3v3 now, which nvd3 is not presently supporting (currently d3v2... d3v3 support in the works as of writing this). For an alternative to nvd3, I'm considering: MorrisJS ! - Works on ie8 (Raphael-based

How do I access the x- and y-scale of the d3 plot in nvd3?

由 前提是你 提交于 2019-12-06 07:31:34
问题 I'm using nvd3 to plot some series and want to add some arbitrary rectangles to the plot. How can I access the underlying x- and y-scale for the d3 plot so I can transform my rectangles' coordinates into the svg pixel coordinates so that are on the same scale as the existing data: function d3_render(response) { nv.addGraph(function() { var data = response; chart.xAxis .axisLabel('Time (s)') .tickFormat(d3.format(',f')); chart.x2Axis .tickFormat(d3.format(',f')); chart.yAxis .axisLabel('Units

Programatically disable series on nvd3 Horizontal Multi-Bar Chart

由 回眸只為那壹抹淺笑 提交于 2019-12-06 06:02:15
The issue is that I have a lot of series on my chart and, on load, I would like only 3 selected. Is there a way to 'disable' ( hide ) a series on nvd3 Horizontal Multi-Bar Chart ? ( I'm looking for the click series behavior but programatically ) I have tried to send JSON with 'visible': false, but it not works. var data=[{"key": "Series 1", "visible": false, "values": [{"value": 10000.0, "label": ... Following @shabeer90 instructions tested with: "disabled": true, In this case series is disabled but don't allow to switch to enable clicking series circle. To the best of my knowledge, you cannot

Fill gaps in NVD3.js

由 ぃ、小莉子 提交于 2019-12-06 05:38:36
I am trying to make horizontal grouped stacked bar graph in NVD3.js. Everything works great until I got a "gap" in my JSON data like bellow: [{ "key": "Education & news", "values": [{ "label": "2014-02-26", "value": 702 }, { "label": "2014-02-27", "value": 204 }, { "label": "2014-02-28", "value": 3213 }] }, { "key": "Entertainment", "values": [{ "label": "2014-02-26", "value": 21 }, //Missing entry for 2014-02-27 { "label": "2014-02-28", "value": 3213 }] }] The error which I got is Uncaught TypeError: Cannot read property '1' of undefined in d3.js. The example and the error of the problem I

How do I add an “average” line to an nvd3.js Stacked Area Chart?

由 落花浮王杯 提交于 2019-12-06 02:57:22
I've got a working Stacked Area Chart using NVD3.js: working jsfiddle here var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.3785948E12,3],[1.3786812E12,6],[1.3787676E12,5],[1.378854E12,1],[1.3789404E12,5],[1.3790268E12,1],[1.3791132E12,3],[1.3791996E12,0],[1.379286E12,2],[1.3793724E12,0]]},{"key":"Miss","values":[[1.3781628E12,3],[1.3782492E12,3],[1.3783356E12,1],[1.378422E12,12],[1.3785084E12,4],[1.3785948E12,7],[1.3786812E12,10],[1.3787676E12,13],[1.378854E12,14],[1.3789404E12,8],[1.3790268E12,5],[1.3791132E12,2]

Bar Chart With View Finder d3.js

由 五迷三道 提交于 2019-12-06 02:34:44
How to provide viewfinder Functionality in d3.js for bar-chart. the chart with view finder is like this http://nvd3.org/ghpages/lineWithFocus.html and the bar chart i want to integrate view finder function is like this http://nvd3.org/ghpages/multiBar.html . can any one help me with this. i am searching for whole week and couldn't get any thing. Actually you can, but you have to make it. And its pretty simple! Download the files from nvd3.org Take the file "linePlusBarWithFocusChart.html". We have to edit that. What am proposing is to remove the data for the line part,so that only the bar data
订阅 nvd3.js