JSFiddle - React, Tailwind, and code Playground

by yuan xiaolong

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- form start -->
<div style="margin:20px">
    <form role="form" class="form-inline">
        <div class="form-group" style="margin-left:20px;float:right">
            <label  class="control-label">Line: </label>
            <select id="lineName_select" class="selectpicker">
            </select>
        </div>
    </form>
</div>
<div id="msg" style="margin-left:20px" > </div>

<div id="container" style="min-width: 310px; height: 400px; margin: 10px auto"></div>

CSS

/* 
for bootstrap-select another way to refresh selector is 

var options = "<option value=''>ALL</option>";
for(var index in names){
   options += "<option value='"+ names[index] +"'>"+names[index]+"</option>";
}
$("#lineName_select").html(options).selectpicker('refresh');

*/

JavaScript

//a chart for a DataSource
var appChart = null;

$(function () {
    
    //selector
    $('.selectpicker').selectpicker();
    $('.selectpicker').selectpicker({
          style: 'btn-info',
          size: 10
    });
    
    Highcharts.setOptions({
        global: {
            useUTC: true //UTC，有中美时差
        }
    });
    
    //config appChart
    appChart = $('#container').highcharts({
        credits:{enabled:false},
        series: [] ,
        chart: {
            renderTo: 'container',
            zoomType:"xy",
            events: {
                load: function() {
                    // `this` is the reference to the chart
                    appChart = this; 
                    getAppData(appChart);
                }
            }
        },
        title: {
            text: 'Demo'
        },

        subtitle: {
            text: ''
        },

        xAxis: {
            type: 'datetime',
            labels: {
                style: {
                    // color: '#525151',
                    font: '10px Helvetica',
                    fontWeight: 'bold'
                },
                formatter: function() {
                    return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);                  
                },
                step:4
            }
        },

        yAxis: { // left y axis
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 3,
                y: 16,
                formatter: function() {
                    return Highcharts.numberFormat(this.value, 0);
                }
            },
            showFirstLabel: false
        },
        tooltip: {//鼠标移到图形上时显示的提示框  
            formatter: function() {  
                // return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'+ this.y;  
                var s = [];

                $.each(this.points, function(i, point) {
                    s.push('<span...