title: dimple.js/d3.js: How to toggle series
body: <p>I have the code below that renders two series on a chart as well as the legends.  What i would like to do is when the respective legend item is clicked, i want to hide/unhide the relevant series line.  I am not sure how to do this.  I have seen this sample: <a href="http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends" rel="nofollow">http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends</a>.  But i don't think it applies here since that example uses a single series, where as i am plotting two distinct lines.</p>
  
  <p>Anyone know how i can solve?  Can i retrieve the series line based on which legend item is clicked?</p>
  
  <pre><code>&lt;div id="chart1"&gt;
      &lt;script&gt;
          var svg1 = dimple.newSvg("#chart1", 600, 500);
          var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}],
                      [{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]]
  
          var chart1 = new dimple.chart(svg1);
          chart1.setBounds(70, 30, 400, 300)
          var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y");
          xAxis.title="Date"
          var yAxis = chart1.addMeasureAxis("y", "y");
          yAxis.title = "Price"
  
          s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]);
          s1.data = data1[0]
          s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]);
          s2.data = data1[1]
          myLegend1 = chart1.addLegend(510, 100,60, 200, "Right");
          chart1.draw();
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>