nvd3.js

rCharts nvd3 library force ticks

一笑奈何 提交于 2019-12-09 00:50:07
问题 I would like to force all tick marks and tick labels to appear along the axis in an rCharts nPlot from the nvd3 library. I have tried several approaches without success. This is the default behaviour: df <- data.frame(x = 1:13, y = rnorm(13)) library(rCharts) n <- nPlot(data = df, y ~ x, type = 'lineChart') n$yAxis(showMaxMin = FALSE) I would like to have all data in 1:13 show along the x axis. Ultimately, I have custom tickmarks I want to show equally-spaced with the following replacement: n

How to force the nvd3 chart timespan to stretch the width of the chart?

我怕爱的太早我们不能终老 提交于 2019-12-08 18:45:32
http://plnkr.co/edit/ymrqIOGTBqF6TVMTvC4T?p=preview I have the latest d3 and nvd3 libraries in the plnkr above. When you first view the chart, you will notice that all the timespan ticks 09:00 , 08:30 , 08:00 etc are all squished/overlaid on top of each other on the left xAxis. Now the timespans will not correctly stretch the length of the chart until the user either clicks on the time range finder below the chart, or resizes the window. Currently the chart looks like this on first load: When it should looks like this: Any idea where I'm going wrong? I found this question here NVD3 Set

nvd3 passing wrong event on stateChange (when clicking legend) after chart is reloaded

故事扮演 提交于 2019-12-08 12:50:17
问题 I have a nvd3 multibar chart (but the same problem occurs with a pie chart). I want to save the status of the legend when the user enables or disables a series, by clicking on it in the legend. So I'm listening to stateChange events. In the following example code there are two series. When the user clicks, say, on series1 to disable it, the console should log: New State: {"disabled":[true,false]} The problem starts occurring after refreshing the chart with new data from the server (simulated

Capture XAxis value NVD3 Stacked Area Chart

可紊 提交于 2019-12-08 10:38:15
问题 I'm having trouble with capturing some data on the StackedAreaChart in NVD3. I'm able to successfully intercept the click event using this answer: NVD3 Stacked Area Chart However, I need to go one step deeper. Now that I've intercepted the event, I'm getting back an object that looks like this: { point: {key:"A Place", values:[], seriesIndex: 1}, pos: [479, 283], series: "A Place", seriesIndex: 1 } The object's pos array looks the most promising- the first element in the array is obviously

nvd3.js - unable to change color of symbol in scatter plot

老子叫甜甜 提交于 2019-12-08 09:33:34
问题 I am trying to change the colors of different groups of the nvd3 scatter chart here but am unable to understand how to do so. I would like to change the colors of the 4 series in the example to orange, green, yellow, red. nv.addGraph(function() { chart = nv.models.scatterChart() .showDistX(true) .showDistY(true) .color( d3.scale.category10().range() ); // tried to change to green, orange here but it did not work }; I tried .color( d3.rgb("green"), d3.rgb("orange") ); but then the plot did not

Changing the y-axis scale in nvd3

守給你的承諾、 提交于 2019-12-08 07:23:10
问题 I am very new to nvd3. I plot a line chart, where most of the points are in the the Y-axis range 99 to 101. Only a few value will be outside this range. Check this image: I want this range to be enlarged all the time. I want end users to focus on the range from 99 to 101, regardless of a big or small values as outliers. Basically, the focus should be on the range from 99 to 101, but the other datapoints should also be displayed. This is my current code: $scope.setChartType = function(type) {

How to force the nvd3 chart timespan to stretch the width of the chart?

雨燕双飞 提交于 2019-12-08 05:38:01
问题 http://plnkr.co/edit/ymrqIOGTBqF6TVMTvC4T?p=preview I have the latest d3 and nvd3 libraries in the plnkr above. When you first view the chart, you will notice that all the timespan ticks 09:00 , 08:30 , 08:00 etc are all squished/overlaid on top of each other on the left xAxis. Now the timespans will not correctly stretch the length of the chart until the user either clicks on the time range finder below the chart, or resizes the window. Currently the chart looks like this on first load: When

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

心已入冬 提交于 2019-12-08 05:13:02
问题 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()

How to add a gap between the nvd3 legend and the chart

怎甘沉沦 提交于 2019-12-08 03:27:48
问题 I'm aware that this question might have be asked before, and as i tried looking to get the answer for this issue, i haven't really found one. Similar to the fiddle here: http://jsfiddle.net/rdesai/vfe2B/51/, im trying to add gap between legend and chart by doing: graph.select(".nv-wrap.nv-legendWrap nv-legend nv-series").attr("transform", "translate(100,75)").style('padding','200px'); graph.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)"); With this approach im able to

Fill gaps in NVD3.js

痞子三分冷 提交于 2019-12-08 02:56:18
问题 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