JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="line">CHANGE WIDTH</div>

<div id="noroll"></div>
<div id="roll14"></div>
<div id="stock_div"></div>

JavaScript

$(function() {
  
  	//var g = [];
  
		var g.push( new Dygraph(
			document.getElementById("noroll"),
		[[new Date("2015-01-01"), 1000, 2000],
    [new Date("2015-01-02"), 1100, 2500],
    [new Date("2015-01-03"), 1200, 3000],
    [new Date("2015-01-04"), 1400, 2800],
    [new Date("2015-01-05"), 1200, 2000]], {}
		));
		
		var g1.push( new Dygraph(
			document.getElementById("roll14"),
		[[new Date("2015-01-01"), 1000, 2000],
    [new Date("2015-01-02"), 1100, 2500],
    [new Date("2015-01-03"), 1200, 3000],
    [new Date("2015-01-04"), 1400, 2800],
    [new Date("2015-01-05"), 1200, 2000]], {}
		));
		
		var g2.push( new Dygraph(
      document.getElementById("stock_div"),
    [], {}
	));
  var chartdata =[[new Date("2015-01-01"), 1000, 2000],
    [new Date("2015-01-02"), 1100, 2500],
    [new Date("2015-01-03"), 1200, 3000],
    [new Date("2015-01-04"), 1400, 2800],
    [new Date("2015-01-05"), 1200, 2000]];
    
  $('#line').on('click', function() {
  	g2.updateOptions({file: chartdata, title:"xxxx"}, true);
  });
  
  });