JSFiddle - React, Tailwind, and code Playground

by JongMin Han

HTML

<link rel="stylesheet" href="https://rawgit.com/iamdenny/BigScatterChart/master/css/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/iamdenny/BigScatterChart/master/css/bigscatterchart.css">
<link rel="stylesheet" href="https://rawgit.com/iamdenny/BigScatterChart/master/css/jquery.dragToSelect.css">
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/jquery.Class.js"></script>
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/jquery.dragToSelect.js"></script>
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/modernizr.js"></script>
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/date.js"></script>
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/underscore-min.js"></script>
<script src="https://rawgit.com/iamdenny/BigScatterChart/master/js/jquery.BigScatterChart.js"></script>
<div style="padding-left:10px; padding-top:30px;">
    <div id="chart1"></div>
</div>

JavaScript

var date = new Date();
if (Modernizr.canvas) {
    doBigScatterChart();
}
var oScatterChart;

function doBigScatterChart() {
    oScatterChart = new BigScatterChart({
        sContainerId: 'chart1',
        nWidth: 480,
        nHeight: 300,
        nXMin: date.getTime() - 86400000,
        nXMax: date.getTime(),
        nYMin: 0,
        nYMax: 10000,
        nZMin: 0,
        nZMax: 5,
        nBubbleSize: 3,
        nDefaultRadius: 3,
        htTypeAndColor: {
            'Succ': '#b6da54', // type name : color
            'Warn': '#fcc666',
            'Fail': '#fd7865',
            'Etc': '#55c7c7'
        },
        sXLabel: '(time)',
        sYLabel: '(ms)',
        htGuideLine: {
            'nLineWidth': 1,
            'aLineDash': [2, 5],
            'nGlobalAlpha': 0.2
        },
        sXLabel: '',
        nPaddingRight: 5,
        fOnSelect: function (htPosition, htXY) {
            console.log('fOnSelect', htPosition, htXY);
            console.time('fOnSelect');
            var aData = this.getDataByXY(htXY.nXFrom, htXY.nXTo, htXY.nYFrom, htXY.nYTo);
            console.timeEnd('fOnSelect');
            console.log('adata length', aData.length);
            alert('Selected data count : ' + aData.length);
        }
    });
    var data = [];
    for (var i = date.getTime() - 86400000; i < date.getTime() - 69120000; i += 173) {
        data.push({
            x: i,
            y: Math.round(_.random(0, 10000) / _.random(1, 1000)),
            type: _.random(0, 100) < 80 ? 'Succ' : (_.random(0, 100) < 80 ? 'Fail' : (_.random(0, 100) < 80 ? 'Warn' : 'Etc'))
        });
    }
    oScatterChart.setBubbles(data);
    oScatterChart.redrawBubbles();
    setTimeout(function () {
        var data = [];
        for (var i = date.getTime() - 69120001; i < date.getTime() - 51840000; i += 173) {
            data.push({
                x: i,
                y: Math.round(_.random(0, 10000) / _.random(1, 1000)),
                type: _.random(0, 100) < 80 ? 'Succ'...