JSFiddle - React, Tailwind, and code Playground

by xls2web

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdn.rawgit.com/xls2web/x2w/Relink/x2w.js"></script>
<div data-role="page">

    <div data-role="header">
        <h1>Excel talks to jQuery plugins</h1>
    </div><!-- /header -->

    <div data-role="content"> 
        <div>
            <label for="slider-distance">Distance (km):</label>
            <input type="range" name="slider-distance" data-mini="true" id="slider-distance" value="0" min="0" max="500" />
            <label for="slider-time">Time (hours):</label>
            <input type="range" name="slider-time" data-mini="true" id="slider-time" value="0" min="0" max="30" />
        </div>   
        <div id="myExcelDiv" class = "xls2web" data-token = "SDEB69797A53B9EE1D!252/-4162847905282696472/t=0&s=0&v=!ANDh8Xi_vXzcWGw" data-callback = "speedometerUpdate" style="width: 300px; height: 220px">
        </div> 
        <div id="speedometer" style="min-width: 220px; max-width: 220px; height: 220px"></div> 

        <div id="log"></div>
    </div><!-- /content -->

</div><!-- /page -->

CSS

#myExcelDiv, #speedometer {
    float:left;
    overflow: hidden    
}
#log {
    clear: both;
	    background: #eee;
	    display: block;
	    margin: 0.5em;
	    min-height: 12em;
	    max-height: 12em;
	    overflow: scroll;
	    position: relative;
	    width: 97%;
	
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    
	    font-family: 'Open Sans', sans-serif;
	    font-size: 0.9em;
        
        white-space: pre-wrap;      /* CSS3 */   
        white-space: -moz-pre-wrap; /* Firefox */    
        white-space: -pre-wrap;     /* Opera <7 */   
        white-space: -o-pre-wrap;   /* Opera 7 */    
        word-wrap: break-word;      /* IE */
}

JavaScript

//----page initiation
$(document).bind("pageinit", function(){
    // create speedometer
	createMySeedometer(); 
	
    //loads xls and assigns init and listener callbacks
    // takes token from data-token attribute of a div
    $(".xls2web").xls2web({init: "x2wInit", listener: "x2wListener"}); 
	
    //handle slider events
	$("#slider-distance").on('slidestop', function(event, ui) {
		event.preventDefault;
		$("#myExcelDiv").xls2JSON({
			writeValue: $(this).val(),
	    	writeTo: "Sheet1!B1",	    		
	    	callback: "justLogResponse"
		});
	}); //updates Sheet1!B1 when "distance" slider is set to a new value and then calls justLogResponse function 

	$("#slider-time").on('slidestop', function(event, ui) {
		event.preventDefault;
		$("#myExcelDiv").xls2JSON({
			writeValue: $(this).val(),
	    	writeTo: "Sheet1!B2",	    		
	    	callback: "justLogResponse"
		}); //updates Sheet1!B2 when "time" slider is set to a new value and then calls justLogResponse function
	});
});

//----custom functions
// configure speedometer gauge
var mySpeedometer;
function createMySeedometer(){
	mySpeedometer = new Highcharts.Chart({	
	    chart: {
	        renderTo: 'speedometer',
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },	    
	    title: {
	        text: 'Speedometer'
	    },	    
	    pane: {
	        startAngle: -150,
	        endAngle: 150,
	        background: [{
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#FFF'],
	                    [1, '#333']
	                ]
	            },
	            borderWidth: 0,
	            outerRadius: '109%'
	        }, {
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#333'],
	                    [1, '#FFF']
	               ...