NVD3 - Mixed Line Chart Viz

Example of how we'd build in D3

HTML

<link rel="stylesheet" href="https://nvd3-community.github.io/nvd3/build/nv.d3.css">
<script src="https://nvd3-community.github.io/nvd3/build/nv.d3.js"></script>
<br />

<h2>Average Urinary Continence</h2>

<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}
.dashed {
    stroke-dasharray: 5, 5;
}

JavaScript

var data = [
  {
    "key": "Patient",
    "color": '#3366cc',
    "values": [ [ 0,100] , [ 1,25] , [ 2,35] , [ 4,95] , [8,85] , [ 12,65] ]
  },
  {
    "key": "Average",
      "color": '#ff7f0e',      
    "values": [ [ 0,95] , [ 1,45] , [ 2,55] , [ 4,70] , [8,75] , [ 12,80] ],
    "classed": 'dashed'
  },
  {
    "key": "Poor Function",
      "color": 'red',      
    "values": [ [ 0,60] , [ 1,18] , [ 2,30] , [ 4,40] , [8,47] , [ 12,50] ],
       "area": true
  }
]

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .x(function(d) { return d[0] })
    .y(function(d) { return d[1] })
    .useInteractiveGuideline(true)
    // Force preset min and max for y-axisw
    .forceY([0,100])
    ;
    
  // this actually builds the chart  
  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart)
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});