title: Toggle data based on checkbox value with morris.js
body: <p>I'm getting trouble in making what I want <code>morris.js</code> charts to do.</p>
  
  <p>My goal is to be able to toggle specific lines based on <code>input[type=checkbox]</code> value.</p>
  
  <p>So far here's what I have done:</p>
  
  <p><strong>JS code</strong></p>
  
  <pre><code>var morris = Morris.Line({
    element: 'line-example',
    data: [
      { y: '2006', a: 100, b: 90 },
      { y: '2007', a: 75,  b: 65 },
      { y: '2008', a: 50,  b: 40 },
      { y: '2009', a: 75,  b: 65 },
      { y: '2010', a: 50,  b: 40 },
      { y: '2011', a: 75,  b: 65 },
      { y: '2012', a: 100, b: 90 }
    ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['Series A', 'Series B']
  });
  
  jQuery(function($) {
      $('#activate').on('change', function() {
        var isChecked = $(this).is(':checked');
        console.log(isChecked);
        if(!isChecked) {
          morris = Morris.Line({
            element: 'line-example',
            ykeys: ['a']
          });
        }
      });
  });
  </code></pre>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="line-example"&gt;&lt;/div&gt;
    &lt;br/&gt;
    &lt;input type="checkbox" id="activate" checked="checked"/&gt; Activate
  &lt;/body&gt; 
  </code></pre>
  
  <hr>
  
  <p>The problem is that the chart duplicates itself with both lines showing up.</p>
  
  <p>Any idea where to investigate to? (I'm not asking for someone to make up the code for me, I just need some tips).</p>