JSFiddle - React, Tailwind, and code Playground

by Scott

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/dygraph/1.0.1/dygraph-combined.js"></script>
<p>The lines should maintain their colors as their visibility is toggled.</p>
<div id="blah"></div>
    <p><b>Display: </b>
    <input type="checkbox" id="0" onClick="change(this)" checked="checked"/>
    <label for="0"> a</label>
    <input type="checkbox" id="1" onClick="change(this)" checked="checked"/>
    <label for="1"> b</label>
    <input type="checkbox" id=2 onClick="change(this)" checked="checked"/>
    <label for="2"> c</label>
    </p>
<div id="blah2"></div>
    <p><b>Display2: </b>          
    <input type=checkbox id=3 onClick="change2(this)" checked/>
    <label for="3"> d</label>
    <input type=checkbox id=4 onClick="change2(this)" checked/>
    <label for="4"> e</label>
    <input type=checkbox id=5 onClick="change2(this)" checked/>
    <label for="5"> f</label>
    </p>

JavaScript

chart = new Dygraph(document.getElementById("blah"),
                          "X,a,b,c\n" +
                          "10,12345,23456,34567\n" +
                          "11,12345,20123,31345\n",
                          {
                            width: 320,
                            height: 240,
                            colors: ['#284785', '#EE1111', '#8AE234'],
                            visibility: [true, true, true]
                          });
      chart2 = new Dygraph(document.getElementById("blah2"),
                          "X,a,b,c\n" +
                          "10,12345,16000,23456,34567\n" +
                          "11,12345,16000,20123,31345\n",
                          {
                            width: 320,
                            height: 240,
                            colors: ['#284785', '#EE1111', '#8AE234'],
                            visibility: [true, true, true]
                          });
      function change(el) {
        chart.setVisibility(el.id, el.checked);
      }
      function change2(e2) {
        chart.setVisibility(e2.id, e2.checked);
      }