JSFiddle - React, Tailwind, and code Playground

by rixo

HTML

<script src="http://www.flotcharts.org/flot/jquery.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<link rel="stylesheet" href="http://www.flotcharts.org/flot/examples/examples.css">
<script src="http://www.flotcharts.org/flot/jquery.flot.resize.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all-neptune.css">

CSS

.demo-container {
    margin: 0;
}

JavaScript

Ext.onReady(function() {
    Ext.widget('window', {
        autoShow: true
        ,shadow: false
        ,title: "Flot in ExtJS"
        ,resizable: true
        ,margin: 10
        ,width: 600
        ,height: 350
        
        ,html: '<div class="demo-container">'
            + '<div id="placeholder" class="demo-placeholder"></div>'
            + '</div>'
        
        ,listeners: {
            resize: function(panel) {
                panel.body.down('.demo-container').setSize(panel.body.getSize());
            }
            ,afterrender: function(panel) {
                var el = this.body;
                el.down('.demo-container').setSize(el.getSize());
                
                var d1 = [];
                for (var i = 0; i < 14; i += 0.5) {
                    d1.push([i, Math.sin(i)]);
                }
                var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
                var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
                
                $.plot("#placeholder", [ d1, d2, d3 ]);
            }
        }
    });
});