JSFiddle - React, Tailwind, and code Playground

by scott216

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function() {
var currentTime = new Date();
var end = currentTime;
var start = new Date(currentTime.getTime() - 15 * 24 * 60 * 60 * 1000);
   
$.getJSON('http://api.xively.com/v2/feeds/4038/datastreams/9.json?start=' + start.toISOString() + '&end='+ end.toISOString() +  '&interval=3600?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', function(data) {

        var xively_datapoints = data.datapoints;
        var chartdata = [];
        
        for (i = 0; i < xively_datapoints.length; i++) {
            chartdata.push([
                Date.parse(xively_datapoints[i].at),
                parseFloat(xively_datapoints[i].value)
            ]);
        }
        
		// Create the chart
		$('#container').highcharts('StockChart', {
			

			rangeSelector : {
				selected : 1
			},

			 exporting: {
                  
                    chartOptions:{		               
	                   yAxis: {
		                    labels: {
		                        style: {
		                            color: '#000',
                                    fontSize: '14px'
		                        }
		                    }
	                    }
	                   
		            }
             },
			
			series : [{
				name : 'api.xively.com/v2/feeds/4038/datastreams/9',
				data : chartdata,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
	});

});