JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div class="container">
  <div class="col-12 mt-3 mb-3">
  
    <!--

    <form id="log_input">
      <div class="form-group">
        <label for="log_input_data">Log Data</label>
        <textarea class="form-control" id="log_input_data" rows="10"></textarea>
        <small class="form-text text-muted">Copy paste your csv log code here.</small>
      </div>
      <button type="submit" class="btn btn-success">Submit Log</button>
    </form>
    
    -->

    <canvas id="log_chart" width="600" height="400"></canvas>

  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

// document ready
(function ($) {

    var ctx = document.getElementById('log_chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Engine Speed',
                backgroundColor: '#ff0000',
                borderColor: '#ff0000',
                fill: false,
                data: [{
                    t: new Date(0.37),
                    y: 2640
                }, {
                    t: new Date(0.85),
                    y: 2560
                }, {
                    t: new Date(1.33),
                    y: 2560
                }, {
                    t: new Date(1.78),
                    y: 2560
                },{
                    t: new Date(2.23),
                    y: 2680
                }, {
                    t: new Date(2.7),
                    y: 2920
                }, {
                    t: new Date(3.16),
                    y: 3200
                }, {
                    t: new Date(3.63),
                    y: 3520
                }]
            }, {
                label: 'Mass Air Flow - Sensor',
                backgroundColor: '#00FFFF',
                borderColor: '#00FFFF',
                fill: false,
                data: [{
                    t: new Date(0.02),
                    y: 19.58
                }, {
                    t: new Date(0.45),
                    y: 16.28
                }, {
                    t: new Date(0.92),
                    y: 8.56
                }, {
                    t: new Date(1.39),
                    y: 8.47
                },{
                    t: new Date(1.86),
                    y: 23.36
                }, {
                    t: new Date(2.33),
                    y: 45.78
                }, {
                    t: new Date(2.78),
                    y: 56.03
                }, {
                    t: new Date(3.23),
                    y: 62.36
                }]
       ...