JSFiddle - React, Tailwind, and code Playground

by Toni

HTML

<script src="http://dygraphs.com/1.0.1/dygraph-combined.js"></script>
<div style="float:left;width:70%;" id="charts">
	<div class="div-chart" ondrop="drop(event)" ondragover="allowDrop(event)" data-nb="0">
		toto
	</div>
</div>
<div style="float:left;width:30%;">
	<table style="width:100%" border="1">
		<tr><th>n°</th><th>unit</th></tr>
		<tr draggable="true" ondragstart="drag(event)" data-id="1">
			<td>1</td>
			<td>km</td>
		</tr>
		<tr draggable="true" ondragstart="drag(event)" data-id="2">
			<td>2</td>
			<td>deg</td>
		</tr>
		<tr draggable="true" ondragstart="drag(event)" data-id="3">
			<td>3</td>
			<td>m2</td>
		</tr>
	</table>
</div>
<div style="clear:both;">
</div>
<script>
       	var divChart = $('div.div-chart').first()[0];
	createChart(divChart, 0);
</script>

JavaScript

var Utils = {

	currentCharts: [],
	currentDyGraphs: []
  
};

function allowDrop(ev) {
		ev.preventDefault();
	}

 function drag(ev) {
		var serieId = $(ev.target).attr('data-id');
		console.log('##ev.target', serieId);
		ev.dataTransfer.setData('Text', serieId);
	}
	
	function drop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData('Text');
		var chartIndex = $(ev.target).parent().parent().attr('data-nb');
		console.log('##data', data, chartIndex, Utils.currentCharts);
		if(null == Utils.currentCharts['c_' + chartIndex]){
			Utils.currentCharts['c_' + chartIndex] = 0;
		}
		Utils.currentCharts['c_' + chartIndex]++;
		var nbUnitsOnCharts = Utils.currentCharts['c_' + chartIndex];
		if(nbUnitsOnCharts <= 2){
			var dyGraphObj = Utils.currentDyGraphs['c_' + chartIndex];
			addDataToChart(dyGraphObj);
		}
		else{	//add a new chart
			console.log('##NEW CHART');
			var divCharts = $('div.div-chart');
			var divChartModel = divCharts.first();
			var divChartModelCopy = divChartModel.clone();
			divChartModelCopy.attr('data-nb', divCharts.length);
			$('#charts').append(divChartModelCopy);
			createChart(divChartModelCopy[0], divCharts.length);
		}
	}
	
	function addDataToChart(dyGraphObj){
	
		console.log('##NEW DATA', dyGraphObj);
		var data = dyGraphObj.rawData_;
		var lastDataElement = data[data.length - 1][0];
		var x = lastDataElement + 100;  // current time
        var y = Math.random() * 5;
        var z = Math.random() * 5;
        data.push([x, y, z]);
		dyGraphObj.updateOptions( { 'file': data } );
	}
	
	function createChart(divChart, indexChart){
		// A basic sinusoidal data series.
		var data = [];
		for (var i = 0; i < 1000; i++) {
			var base = 10 * Math.sin(i / 90.0);
			data.push([i, base, base + Math.sin(i / 2.0)]);
		}

		// Shift one portion out of line.
		var highlight_start = 450;
		var highlight_end = 500;
		for (var i = highlight_start; i <= highlight_end; i++) {
			data[i][2] += 5.0;
		}

		var g = new Dygraph(
		  divChart,
		 ...