LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
    
Settings
Add New Bar
CSS
body{
    margin:0;
    padding:0;
    display: block;
}
#chart{
    border: 1px solid #ccc;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}
.card.setting {
    width: 300px;
    position: absolute;
    left: 10px;
    top: 10px;
}
.card.add {
    width: 300px;
    position: absolute;
    right: 10px;
    top: 10px;
}
JS
function randomColor(palette){
    let colors = [
            ["084c61","db504a","e3b505","4f6d7a","56a3a6"],
            ["be6e46","cde7b0","a3bfa8","7286a0","59594a"],
            ["01161e","124559","598392","aec3b0","eff6e0"],
            ["99621e","d38b5d","f3ffb6","739e82","2c5530"],
        ],
        random = Math.floor(Math.random() * 5),
        color = palette ? colors[palette][random] : colors[0][random];
    return "#" + color;
}

function rand(min, max){
    return Math.floor(Math.random() * max) + min;
}


(function () {

    var lbMargin = 20,
        rtMargin = 10,
        margin = lbMargin + rtMargin,
        barSpace = 5,
        canvas = null;

    // Define our constructor
    this.ChartBar = function () {
        // Define option defaults
        var defaults = {
            data: [],
            container: "chart",
            size: {w: 500, h: 250},
            label: {x: 'X Axis', y: 'Y Axis'},
            bgColor: "white",
            valueLableTail: "%",
            valueLableEnable: false,
            isVertical: true,
        }

        // Create opt by extending defaults with the passed in arugments
        if (arguments[0] && typeof arguments[0] === "object") {
            this.opt = extendDefaults(defaults, arguments[0]);
        }

        initialize.call(this);
    }

    // Public Methods
    ChartBar.prototype.addBar = function (options) {
        this.opt.data.push({
            color: options.color ? options.color : '#34e',
            value: options.value ? options.value : 50,
            valueColor: options.valueColor ? options.valueColor : 'white'
        });
        render.call(this);
    }

    ChartBar.prototype.render = function (options) {
        if (options && typeof options === "object") {
            this.opt = extendDefaults(this.opt, options);
        }
        initialize.call(this);
    }

    // Private Methods
    function extendDefaults(source, properties) {
        var property;
        for (property in properties) {
            if (properties.hasOwnProperty(property)) {
                source[property] = properties[property];
            }
        }
        return source;
    }

    // Initialize the canvas
    function initialize() {
        this.canvas = document.getElementById(this.opt.container);

        this.canvas.width = this.opt.size.w;
        this.canvas.height = this.opt.size.h;
        this.ctx = this.canvas.getContext("2d");

        render.call(this);
    }

    //Axis
    function axis() {
        var ctx = this.ctx,
            lRth = this.opt.size.w - rtMargin,
            lBtn = this.opt.size.h - lbMargin;

        ctx.beginPath();
        ctx.moveTo(lbMargin, rtMargin);
        ctx.lineTo(lbMargin, lBtn);
        ctx.lineTo(lRth, lBtn);
        ctx.stroke();
    }

    //Bars
    function bars() {
        var ctx = this.ctx,
            w = this.opt.size.w,
            h = this.opt.size.h,
            prct  = (this.opt.isVertical?h:w) - margin,
            barWidth = Math.floor(((this.opt.isVertical ? w : h) - margin - barSpace) / this.opt.data.length) - barSpace;

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.opt.data.forEach( (item, index) => {
            // Filter user input
            item.value = item.value > 100 ? 100 : item.value;
            item.value = item.value < 0 ? 0 : item.value;

            let value = item.value * prct / 100,
                barMinHeightPoint = index * (barWidth + barSpace) + barSpace + (this.opt.isVertical?lbMargin:rtMargin),
                lableCenter = (lbMargin + 1) + Math.floor(value / 2),
                lableMiddle = (barWidth / 2) + barMinHeightPoint;

            ctx.fillStyle = item.color;

            if (this.opt.isVertical) {
                lableMiddle = h - ((lbMargin + 1) + Math.floor(value / 2));
                lableCenter = (barWidth / 2) + barMinHeightPoint;

                ctx.fillRect(barMinHeightPoint, h - lbMargin - 1, barWidth, -value);
            } else {
                ctx.fillRect(lbMargin + 1, barMinHeightPoint, value, barWidth);
            }

            if (this.opt.valueLableEnable) {
                ctx.fillStyle = item.valueColor ? item.valueColor : 'black';
                ctx.fillText(item.value + this.opt.valueLableTail, lableCenter, lableMiddle);
            }
        });
    }

    //Labels
    function labels() {
        var ctx = this.ctx,
            w = this.opt.size.w,
            h = this.opt.size.h,
            offset = 10;

        ctx.setTransform(1, 0, 0, 1, 0, 0);

        ctx.fillStyle = '#000000';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = '12px Verdana';

        ctx.fillText(this.opt.label.x, Math.floor((w - margin) / 2), h - offset);

        ctx.rotate(3 * Math.PI / 2)
        ctx.fillText(this.opt.label.y, -(margin + Math.floor((h - margin) / 2)), offset);
    }

    // Render the Chart
    function render() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.fillStyle = this.opt.bgColor;
        this.ctx.fillRect(0, 0, this.opt.size.w, this.opt.size.h);

        //Axis
        axis.call(this);

        // Text
        labels.call(this);

        // Bars
        if (this.opt.data.length)
            bars.call(this);
    }
}());


var myInstance = new ChartBar({
    container: "chart",
    size: {w: 500, h: 600},
    label: {x: 'X Axis', y: 'Y Axis'},
    valueLableTail: '%',
    valueLableEnable: true,
    data: [
        {color: randomColor(), value: rand(0,100), valueColor: 'black'},
        {color: randomColor(), value: rand(0,100), valueColor: 'black'},
        {color: randomColor(), value: rand(0,100), valueColor: 'black'},
        {color: randomColor(), value: rand(0,100), valueColor: 'black'},
        {color: randomColor(), value: rand(0,100), valueColor: 'black'},
    ],
    isVertical: false
});

document.getElementById("add").addEventListener("click", function(event){
    event.preventDefault();
    myInstance.addBar({
        color: document.addItem.barColor.value,
        value: document.addItem.barValue.value,
        valueColor: document.addItem.labelColor.value
    });
});

document.getElementById("set").addEventListener("click", function(event){
    event.preventDefault();

    myInstance.render({
        label: {
            x: document.setting.xAxis.value ? document.setting.xAxis.value : 'X Axis',
            y: document.setting.yAxis.value ? document.setting.yAxis.value : 'Y Axis',
        },
        size: {
            w: document.setting.width.value ? document.setting.width.value : 500,
            h: document.setting.height.value ? document.setting.height.value : 300,
        },
        valueLableTail: document.setting.valueLableTail.value ? document.setting.valueLableTail.value : '%',
        bgColor: document.setting.bgColor.value ? document.setting.bgColor.value : '#edead0',
        isVertical: document.setting.valueVertical.checked,
    });
});

$('.mycp').colorpicker();

Description

BarChart is an javascript project with with canvas to show you a bar chart
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv