title: Multiple connected one line charts with angular-nvd3
body: <p>Is there is a way to create multiple connected one line charts with <code>useInteractiveGuideline=true</code> options. Such need is become when you need to show 3 different types of data on one graph (E.g. Fuel status, Engine working hours and water tank status ). Attached example by <code>jquery-dygraph</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/tAkFS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tAkFS.png" alt="enter image description here"></a></p>
  
  <p>I tried to do this using ng-repeat, but only firts chart appears: </p>
  
  <p><code>&lt;div ng-repeat="data in widget.widgetData"&gt;
      &lt;nvd3 options="widget.widgetOptions" data="data" api="widget.api" on-ready="widget.onReadyCallback"&gt;&lt;/nvd3&gt;
  &lt;/div&gt;</code></p>
  
  <p>where widget.widgetData is:</p>
  
  <p><code>widget.widgetData = [[charts.fuelData],[charts.engineHoursData]];</code></p>
  
  <p>My inner widget data object is: </p>
  
  <p><code>fuelData: { values: [], key: 'Fuel', color: '#' + (Math.random() * 0xFFFFFF &lt;&lt; 0).toString(16), strokeWidth: 1, classed: '' },
     engineHoursData: { values: [], key: 'Engine Hours', color: '#' + (Math.random() * 0xFFFFFF &lt;&lt; 0).toString(16), strokeWidth: 1, classed: '' }</code></p>
  
  <p>If there is an option to do such behavior in this directive?</p>