Canvas based bar graphics

ChartJS 2 is an open source highly customizable Graphics Library for JavaScript.
Here I include an example to achieve this bar chart:

HTML;

<div class="jsBarGraphDiv" data-bardata="95,50,95,50,50,10" data-colors="#F44133,#FFC300,#4BB04F" 
   data-labels="Jul,Ago,Set,Out,Nov,Dec">
  <canvas height="215" id="barCanvas"></canvas>
</div>

JavaScript:

Just instance this class:

function BarChart(pSettings) {
    var data = {
        labels: [],
        datasets: [{
            type: 'bar',
            backgroundColor: [],
            data: []
        }]
    },
        config = {
            type: 'bar',
            data: {},
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                title: {
                    display: false,
                },
                tooltips:
                {
                    enabled: false
                },
                scales: {
                    xAxes: [{
                        barThickness: 14,
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 0
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
       labelString: 'Baixo         Médio         Alto'
                        },
                        gridLines: {
                            drawTicks: true
                        },
                        ticks: {
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            stepSize: 34,
                            callback: function () {
                                return '';
                            }
                        }
                    }]
                }
            }
        },
        settings = {
            BarGraphDiv: '.jsBarGraphDiv'
        },
        options = {},
            aColors = [];
    //
    function init(pSettings) {
        options = $.extend(settings, pSettings || {});
        var _$BarGraphDiv = $(options.BarGraphDiv),
            _graphData = _$BarGraphDiv.data('bardata');
        if (_graphData) {
            if (typeof _graphData == 'number') {
                _graphData = [_graphData];
                data.labels = [_$BarGraphDiv.data('labels')];
            }
            else {
                _graphData = _graphData.split(',');
                _graphData = _graphData.map(function (el) { return Number(el) });
                data.labels = _$BarGraphDiv.data('labels').split(',');
            }
            aColors = _$BarGraphDiv.data('colors').split(',');            
            data.datasets[0].backgroundColor = _graphData.map(function (el, i) {
                return aColors[Math.floor(el / 33.4)];
            });
            data.datasets[0].data = _graphData;
            config.data = data;
            var ctx = $(options.BarGraphDiv).find('canvas')[0].getContext('2d');
            new Chart(ctx, config);
            var _cssLowMidHigh = ['low', 'mid', 'high'][Math.floor(_graphData[_graphData.length - 1] / 33.4)];
            _$BarGraphDiv.addClass(_cssLowMidHigh);
        }
    }
    //
    init(pSettings);
}

Animated scroll to a certain point of the web page.

Just add the next code:

$('html,body').animate({ scrollTop: _top }, 1000, 'swing');

Reference: http://api.jquery.com/animate/

CLEditor, paste as plain text

CLEditor is an open source jQuery plug-in which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.

In order to prevent users to paste content with formatted text, and instead, get only its text the following chunk of cross-browser code:


var _$ta = $('textarea.richText').cleditor({ 
            // options
           }),
    _clEdit = _$ta.cleditor()[0];

$(_clEdit.$frame[0].contentWindow.document)
       .on('rightclick', function (e) {
             e.preventDefault();
       })
       .on('paste', function (e) { // Paste as plain text
           var content = '';
           e.preventDefault();
           if (e.originalEvent.clipboardData) {
               content = (e.originalEvent 
                   || e).clipboardData.getData('text/plain');
           }
           else if (window.clipboardData) {
               content = window.clipboardData.getData('Text');
           }
           content = content.replace(/\n/g, "<br />");
           _clEdit.execCommand('inserthtml', content);
        });

Get int or float number from a string

Number("this a test (12.75%)".match(/\d*\.*\d+/g)[0]); // Output: 12.75