<!-- required files -->
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
<script src="../assets/plugins/d3/d3.min.js"></script>
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>

<div id="nv-stacked-bar-chart" class="h-250px"></div>

<script>
  var stackedBarChartData = [{
    key: 'Stream 1',
    'color' : app.color.red,
    values: [
      { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}, 
      { x:11, y: 23}, { x:12, y: 12}, { x:13, y: 22}, { x:14, y: 22}, { x:15, y: 48}, { x:16, y: 54}, { x:17, y: 32}, { x:18, y: 13}, { x:19, y: 21}, { x:20, y: 12}
    ]
  },{
    key: 'Stream 2',
    'color' : app.color.orange,
    values: [
      { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 
      { x:11, y: 43}, { x:12, y: 45}, { x:13, y: 32}, { x:14, y: 32}, { x:15, y: 38}, { x:16, y: 64}, { x:17, y: 42}, { x:18, y: 23}, { x:19, y: 31}, { x:20, y: 22}
    ]
  },{
    key: 'Stream 2',
    'color' : app.color.componentColor,
    values: [
      { x:1, y: 20}, { x:2, y: 25}, { x:3, y: 26}, { x:4, y: 30}, { x:5, y: 57}, { x:6, y: 52}, { x:7, y: 22}, { x:8, y: 75}, { x:9, y: 44}, { x:10, y: 62}, 
      { x:11, y: 35}, { x:12, y: 15}, { x:13, y: 25}, { x:14, y: 25}, { x:15, y: 45}, { x:16, y: 55}, { x:17, y: 35}, { x:18, y: 15}, { x:19, y: 25}, { x:20, y: 15}
    ]
  }];

  nv.addGraph({
    generate: function() {
      var stackedBarChart = nv.models.multiBarChart()
        .stacked(true)
        .showControls(false);

      var svg = d3.select('#nv-stacked-bar-chart').append('svg').datum(stackedBarChartData);
      svg.transition().duration(0).call(stackedBarChart);
      return stackedBarChart;
    }
  });
</script>