score:0

Its a bit tricky finding out the solution but once you get to know it, its pretty straight forward.

You need simply update the chart calling d3.select('#chart svg').datum(sendyouNewData)

I have used the same code as in the NVD3 site the only additional code I added was the chart update function on a button click, oh and the added a width and height to the chart.

The following code is a working tested code. The live code is 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
});

Hope it answers your question :D

score:1

A suggestion for hide/unhide only, 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>

score:4

You can actually do this - took a little bit of digging 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()
});

Related Query

More Query from same tag