JSFiddle - React, Tailwind, and code Playground

by Sanjay

HTML

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>
<div id="graph2"></div>












<div id ="form1" style="display: none;">
    <h2>Annotation and Tags</h2>
    <input id="title" placeholder="title" type="text" name="title">
    <input id="body" placeholder="description" type="text" name="body">
    <button id="btt">Submit</button>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}

.dygraph-title {
    color: gray;
}

h2 {
    font-size: 2em;
    font-weight: bold;
    color: #fff;
}

#form1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    padding: 15px 5%;
    background: #222;
    color: #fff;
}
input {
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    margin: 10px 0;
}

JavaScript

// Global Variables like they are coming from Database 
var data1 = [[1,3,5],[2,5,6],[3,9,2],[4,15,8],[5,14,2],[6,8,5],[7,13,8],[8,11,12],[9,5,7],[10,8,19],[14,10,7],[16,4,28],[17,9,9],[19,14,8],[20,6,14],[21,15,3]];
var data2 = [];
var title = '';
var body = '';
var series = ['x','W1', 'W2'];
// Build intial graph
buildGraph("graph", data1);

// Callback when intial graph is zoomed
function zoomData(minDate, maxDate, yRange) {
    data1.forEach(function(element, index, array) {
        if (element.length > 1) {
    		if (IsNumeric(element[0])) {
                if (element[0] >= minDate && element[0] <= maxDate) {
                	data2.push(element);
                }
            }
        }
    });
    console.log(data2);
    document.getElementById('form1').style.display = 'block';
}

document.getElementById('btt').onclick = function() {
	title = document.getElementById('title').value;
    body = document.getElementById('body').value;
    document.getElementById('form1').style.display = 'none';
    buildGraph("graph2", data2);
};
// Build graph with data and within given DOM element ID
function buildGraph(id, data) {
    $title = 'dygraphs chart template';
    if (title != '') {
        $title = title + body;
    }
    g = new Dygraph(document.getElementById(id),
        data,
        {
      labels: series,
          legend: 'always',
          animatedZooms: true,
          title: $title,
          zoomCallback : function(minDate, maxDate, yRange){
            zoomData(minDate, maxDate, yRange);
          }
        });
}
var annotations = [];
    annotations.push({
      series: 'W2',
      x: 10,
      shortText: 'hey there',
      width: 100,
      height: 30,
      tickHeight: 220,
      color: '#000',
      attachAtBottom: true,
      cssClass: 'annot-label'
    });
g.setAnnotations(annotations);





function IsNumeric(input) {
    return (input - 0) == input && (''+input).trim().length > 0;
}