Skip to content

Instantly share code, notes, and snippets.

@mainakibui

mainakibui/visualize.jQuery.js

Created March 18, 2013 22:42
Download ZIP

Revisions

  1. mainakibui created this gist Mar 18, 2013.
    218 changes: 218 additions & 0 deletions visualize.jQuery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,218 @@
    //function to create a chart
    var createChart = {
    pie: function(){

    canvasContain.addClass('visualize-pie');

    if(o.pieLabelPos == 'outside'){ canvasContain.addClass('visualize-pie-outside'); }

    var centerx = Math.round(canvas.width()/2);
    var centery = Math.round(canvas.height()/2);
    var radius = centery - o.pieMargin;

    //console.log ("centerx --> "+centerx+"centery --> "+centery+"radius --> "+radius);

    //Check to ensure that radius is never calculated as a 0
    if( radius <= 0)
    {

    radius = 85;
    centerx = 105;
    centery = 105;

    }

    var counter = 0.0;
    var toRad = function(integer){ return (Math.PI/180)*integer; };

    var labels = $('<ul class="visualize-labels"></ul>')
    .insertAfter(canvas);

    //draw the pie pieces
    $.each(memberTotals, function(i){
    var fraction = (this <= 0 || isNaN(this))? 0 : this / dataSum;
    ctx.beginPath();
    ctx.moveTo(centerx, centery);
    ctx.arc(centerx, centery, radius,
    counter * Math.PI * 2 - Math.PI * 0.5,
    (counter + fraction) * Math.PI * 2 - Math.PI * 0.5,
    false);
    ctx.lineTo(centerx, centery);
    ctx.closePath();
    ctx.fillStyle = dataGroups[i].color;
    ctx.fill();
    // draw labels
    var sliceMiddle = (counter + fraction/2);
    var distance = o.pieLabelPos == 'inside' ? radius/1.5 : radius + radius / 5;
    var labelx = Math.round(centerx + Math.sin(sliceMiddle * Math.PI * 2) * (distance));
    var labely = Math.round(centery - Math.cos(sliceMiddle * Math.PI * 2) * (distance));
    var leftRight = (labelx > centerx) ? 'right' : 'left';
    var topBottom = (labely > centery) ? 'bottom' : 'top';
    var percentage = parseFloat((fraction*100).toFixed(2));

    if(percentage){
    var labelval = (o.pieLabelsAsPercent) ? percentage + '%' : this;
    var labeltext = $('<span class="visualize-label">' + labelval +'</span>')
    .css(leftRight, 0)
    .css(topBottom, 0);
    if(labeltext)
    var label = $('<li class="visualize-label-pos"></li>')
    .appendTo(labels)
    .css({left: labelx, top: labely})
    .append(labeltext);
    labeltext
    .css('font-size', radius / 8)
    .css('margin-'+leftRight, -labeltext.width()/2)
    .css('margin-'+topBottom, -labeltext.outerHeight()/2);

    if(dataGroups[i].textColor){ labeltext.css('color', dataGroups[i].textColor); }
    }
    counter+=fraction;
    });
    },

    line: function(area){

    if(area){ canvasContain.addClass('visualize-area'); }
    else{ canvasContain.addClass('visualize-line'); }

    //write X labels
    var xInterval = canvas.width() / (xLabels.length -1);
    var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
    .width(canvas.width())
    .height(canvas.height())
    .insertBefore(canvas);
    $.each(xLabels, function(i){
    var thisLi = $('<li><span>'+this+'</span></li>')
    .prepend('<span class="line" />')
    .css('left', xInterval * i)
    .appendTo(xlabelsUL);
    var label = thisLi.find('span:not(.line)');
    var leftOffset = label.width()/-2;
    if(i == 0){ leftOffset = 0; }
    else if(i== xLabels.length-1){ leftOffset = -label.width(); }
    label
    .css('margin-left', leftOffset)
    .addClass('label');
    });

    //write Y labels
    var yScale = canvas.height() / totalYRange;
    var liBottom = canvas.height() / (yLabels.length-1);
    var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
    .width(canvas.width())
    .height(canvas.height())
    .insertBefore(canvas);

    $.each(yLabels, function(i){
    var thisLi = $('<li><span>'+this+'</span></li>')
    .prepend('<span class="line" />')
    .css('bottom',liBottom*i)
    .prependTo(ylabelsUL);
    var label = thisLi.find('span:not(.line)');
    var topOffset = label.height()/-2;
    if(i == 0){ topOffset = -label.height(); }
    else if(i== yLabels.length-1){ topOffset = 0; }
    label
    .css('margin-top', topOffset)
    .addClass('label');
    });

    //start from the bottom left
    ctx.translate(0,zeroLoc);
    //iterate and draw
    $.each(dataGroups,function(h){
    ctx.beginPath();
    ctx.lineWidth = o.lineWeight;
    ctx.lineJoin = 'round';
    var points = this.points;
    var integer = 0;
    ctx.moveTo(0,-(points[0]*yScale));
    $.each(points, function(){
    ctx.lineTo(integer,-(this*yScale));
    integer+=xInterval;
    });
    ctx.strokeStyle = this.color;
    ctx.stroke();
    if(area){
    ctx.lineTo(integer,0);
    ctx.lineTo(0,0);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.globalAlpha = .3;
    ctx.fill();
    ctx.globalAlpha = 1.0;
    }
    else {ctx.closePath();}
    });
    },

    area: function(){
    createChart.line(true);
    },

    bar: function(){

    canvasContain.addClass('visualize-bar');

    //write X labels
    var xInterval = canvas.width() / (xLabels.length);
    var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
    .width(canvas.width())
    .height(canvas.height())
    .insertBefore(canvas);
    $.each(xLabels, function(i){
    var thisLi = $('<li><span class="label">'+this+'</span></li>')
    .prepend('<span class="line" />')
    .css('left', xInterval * i)
    .width(xInterval)
    .appendTo(xlabelsUL);
    var label = thisLi.find('span.label');
    label.addClass('label');
    });

    //write Y labels
    var yScale = canvas.height() / totalYRange;
    var liBottom = canvas.height() / (yLabels.length-1);
    var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
    .width(canvas.width())
    .height(canvas.height())
    .insertBefore(canvas);
    $.each(yLabels, function(i){
    var thisLi = $('<li><span>'+this+'</span></li>')
    .prepend('<span class="line" />')
    .css('bottom',liBottom*i)
    .prependTo(ylabelsUL);
    var label = thisLi.find('span:not(.line)');
    var topOffset = label.height()/-2;
    if(i == 0){ topOffset = -label.height(); }
    else if(i== yLabels.length-1){ topOffset = 0; }
    label
    .css('margin-top', topOffset)
    .addClass('label');
    });

    //start from the bottom left
    ctx.translate(0,zeroLoc);
    //iterate and draw
    for(var h=0; h<dataGroups.length; h++){
    ctx.beginPath();
    var linewidth = (xInterval-o.barGroupMargin*2) / dataGroups.length; //removed +1
    var strokeWidth = linewidth - (o.barMargin*2);
    ctx.lineWidth = strokeWidth;
    var points = dataGroups[h].points;
    var integer = 0;
    for(var i=0; i<points.length; i++){
    var xVal = (integer-o.barGroupMargin)+(h*linewidth)+linewidth/2;
    xVal += o.barGroupMargin*2;

    ctx.moveTo(xVal, 0);
    ctx.lineTo(xVal, Math.round(-points[i]*yScale));
    integer+=xInterval;
    }
    ctx.strokeStyle = dataGroups[h].color;
    ctx.stroke();
    ctx.closePath();
    }
    }
    };