How to programmatically change the viewfinder (focus diagram) of an NVD3 line diagram?

Question

The example I'm talking about is here: http://nvd3.org/ghpages/lineWithFocus.html

What I would like to do is have predefined ranges for programmatically changing the visible range of the viewer. For example, I could have buttons to show only the last 30 days of data or show ALL data. When the user clicks on any of the buttons, the viewfinder will change to display only data in the selected range.

Does anyone have any suggestions on how to do this?

Thanks CZ

Answer 1

In fact, you can do this - work a little, but here's how:

nv.addGraph(function() { window.chart = nv.models.lineWithFocusChart() // Do whatever you need to do to set up the chart, and keep a reference to it }); $("#preset-range").on("click", function() { // Get the min and max min = $(this).data("min") max = $(this).data("max") // Change the focus chart range programatically chart.brushExtent([min, max]).update() }); 

Answer 2

Suggestion only for hiding / displaying based on http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/ :

 <button type="button" id="nv-toggle">Show View Finder</button> <script> $(document).ready(function() { $('#nv-toggle').click(function() { // make the collapse content to be shown or hide var toggle_switch = $(this); $('.nv-context').toggle(function() { if($(this).css('display')=='none') { toggle_switch.html('Show View Finder'); } else { toggle_switch.html('Hide View Finder'); } }); }); }); </script> 

Answer 3

It's a little hard to find a solution, but once you find out, it's pretty straight forward.

You just need to update the d3.select('#chart svg').datum(sendyouNewData) call d3.select('#chart svg').datum(sendyouNewData)

I used the same code as on the NVD3 website, the only code I added was the function of updating the chart when the button was pressed, o and added the width and height to the chart.

The following code is a validated code. Live code here

Your html

 <input type="button" id="change1" value="Change 1"/> <input type="button" id="change2" value="Change 2"/> <div id="chart"> <svg></svg> </div> 

Your javascript

 var dynamic_lineWithFocusChart, lineWithFocusChart; var width = 500, height = 500; nv.addGraph(function () { var chart = nv.models.lineWithFocusChart().width(width).height(height); chart.xAxis.tickFormat(d3.format(',f')); chart.yAxis.tickFormat(d3.format(',.2f')); chart.y2Axis.tickFormat(d3.format(',.2f')); dynamic_lineWithFocusChart = d3.select('#chart svg').datum(testData()); dynamic_lineWithFocusChart.transition().duration(1000).call(chart).attr('width', width).attr('height', height); nv.utils.windowResize(chart.update); lineWithFocusChart = chart; return chart; }); /* * Simple test data generator */ function testData() { return stream_layers(3, 128, .1).map(function (data, i) { return { key: 'Stream' + i, values: data }; }); } /* * Update the Line Focus chart with the Button Click */ $("#change1,#change2 ").click(function () { dynamic_lineWithFocusChart.datum(testData()); dynamic_lineWithFocusChart.transition().duration(1000).call(lineWithFocusChart); dynamic_lineWithFocusChart.update }); 

I hope he answers your question: D