I'm using nvd3 for a multi-bar chart, and I'd like to make the chart redraw when the user clicks the other html on my page. I tried using jQuery to select the "Stream0" legend circle on the nvd3 homepage (http://nvd3.org/) and click it using this snippet in the console:
$($('g.nv-series')[0]).click()
For reasons that I hope will be immediately obvious to people more knowledgeable about javascript, nothing happens. Is it something to do with event delegation?
http://nvd3.org/
you can try this:
chart.legend.dispatch.legendClick = function(d, i){
//redraw
};
It will append your own method to the legend; it works for pie chart not sure if works for the line chart;
Maybe there is some help in this. Two charts, one pie, one stack but only showing legends on pie.
The data is not identical but the legends are..
Want to update both on clicking pie legends.
chart.legend.dispatch.on('stateChange.pie', function(d,i){
setTimeout(function() {
stackedAreaChart.dispatch.changeState(d,i);
stackedAreaChart.update();
}, 100);
});
Note: using the ".pie" will extend the (library) stateChange event (not overwrite it)
The other chart stackedAreaChart has to be in the scope.
Note there is a changeState event and a stateChange, best is to look at the un-minified nvd3 js file..
Related
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();
I'm actually developing one app using the javascript plugin chartjs (on the framework Symfony 3) and I realised that when we create a chart before the page it's ready, the legend it's correctly shown, but when I create other chart doing click on a button (after document.ready) the legend it's hidden.
To illustrate my problem, when I do :
// the chart is draw with the legend
drawChart();
// The chart is draw without the legend
$(document).ready(function() {
drawChart();
});
Have you ever meet this problem ? Is there a solution to solve this ?
Big thanks to all who takes time to help me !
I'm new to D3 and would like to implement a click-drag-zoom similar to what is shown here: http://www.highcharts.com/demo/line-time-series
I already have a line graph I have built, but am confused as to how to implement this.
I guess I need some JS event handlers to find where my mousedown and mouseup happens. But how do I create the shading that occurs on the graph when the user is dragging?
You'll probably want to use a brush to do this in d3.js. You can see an example that I put together at http://bl.ocks.org/1962173 which does something similar.
The relevant code is:
var brush = d3.svg.brush()
.x(x)
.extent([d3.time.monday(now),d3.time.saturday.ceil(now)])
.on("brush", display);
where display is a function that redraws data based on the current extent of brush. This way you don't need to try and hook your own handlers or even worry about resizing the highlighted region at all.
Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....