Range chart - with code and sample image :)

Hi,

I was in need of great-looking, HTML/JS chart representing ranges as horizontal 
lines - and I've done it :)
Any comment, notification, feature request is warmly accepted - even donation 
like $1 :D

Thanks,
   TeeCee :o)

The needed code-changes are here:

Adding CSS for the vertical dotted lines (visualize.css):
=========================================================
/*range labels*/
.visualize-range .visualize-labels-x li span.line { opacity:0.6; border-left: 
1px dotted #ccc; }

Adding a new chart type (in visualize.jQuery.js around line 190 directly after 
'var createChart = {' - and before 'pie: function(){') 

=========================================================
range: function(){
    canvasContain.addClass('visualize-range');

    //write X labels
    var xInterval = canvas.width() / (xLabels.length -1);
    var xInterval = canvas.width() / (o.topValue-o.bottomValue);
    var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
        .width(canvas.width())
        .height(canvas.height())
        .insertBefore(canvas);
    for(i=o.bottomValue;i<=o.topValue;i++){
        var thisLi = $('<li><span>'+i+'</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');
    }
    // Removing first and last border
    $('.visualize-scale .visualize-labels-x li span.line:first').remove();
    $('.visualize-scale .visualize-labels-x li span.line:last').remove();

    var yScale = canvas.height() / ($(dataGroups).length+1);
    //start from the bottom left
    ctx.translate(0,zeroLoc);
    //iterate and draw
    for(i=0;i<dataGroups.length;i++) {
        ctx.beginPath();
        ctx.lineWidth = o.lineWeight;
        ctx.strokeStyle = dataGroups[i].color;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.moveTo(xInterval*(dataGroups[i].points[0]-1)+(o.lineWeight/2)+2, -(i+1)*yScale);
        ctx.lineTo(xInterval*(dataGroups[i].points[1])-(o.lineWeight/2)-2, -(i+1)*yScale);
        ctx.stroke();
        ctx.closePath();
    }
},
Original issue reported on code.google.com by mr.tee...@gmail.com on 17 Sep 2010 at 12:16
smruti-bapi / dwpe

Range chart - with code and sample image :) #41
