JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<script src="http://dygraphs.com/dygraph-combined.js"></script>
<div id="demodiv"></div>
<div>Sine:
    <select id="sine">
        <option value="0">Select</option>
        <option value="1">Dotted</option>
    </select>Another Line:
    <select id="anotherLine">
        <option value="2">Select</option>
        <option value="3">Dot Dash</option>
    </select>
</div>

JavaScript

$('#sine').change(function () {
    var pattern = Dygraph.DOTTED_LINE;
    g.updateOptions({
        'sine': {
            strokePattern: pattern,
            strokeWidth: 3

        }
    });
});


$('#anotherLine').change(function () {
    var pattern = Dygraph.DOT_DASH_LINE;

    g.updateOptions({
        'another line': {
            strokePattern: pattern,
            strokeWidth: 3

        }
    });
});


function data() {
    var r = "date,sine,another line\n";
    for (var i = 1; i <= 31; i++) {
        r += "2006/10/" + (i > 10 ? i : "0" + i);
       
        r += "," + 10 * (250 - 8 * i);
        r += "," + 10 * (125 + 125 * Math.sin(0.3 * i));
        r += "\n";
    }
    return r;
}

// To construct a dygraph, pass in a div, the data and options.
// legend: 'always' makes the legend show up, even when the mouse isn't over the chart.
g = new Dygraph(document.getElementById("demodiv"), data, {
    title: 'Stacked chart w/ Total',
    stackedGraph: true,
    axes: {
        x: {
            valueFormatter: function (val, opts, series_name, dygraph) {
                for (var i = 0; i < dygraph.numRows(); i++) {
                    if (dygraph.getValue(i, 0) != val) continue;
                    var total = 0;
                    for (var j = 1; j < dygraph.numColumns(); j++) {
                        total += dygraph.getValue(i, j);
                    }
                    return Dygraph.dateString_(val) + ' (total: ' + total.toFixed(2) + ')';
                }
            }

        }
    }
});