Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added dots to line and area graphs
  • Loading branch information
irae committed Apr 22, 2010
1 parent 0a6eaf5 commit fe26bcd
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 3 deletions.
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -12,7 +12,7 @@
//make some charts
$('table.pie').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});
$('table.line').visualize({type: 'line'});
$('table.area').visualize({type: 'area'});
$('table.area').visualize({type: 'area',lineDots:false});
$('table.bar').visualize({type: 'bar', barDirection: 'horizontal'});
});
</script>
Expand Down
33 changes: 31 additions & 2 deletions visualize.jQuery.js
Expand Up @@ -25,6 +25,8 @@ $.fn.visualize = function(options, container){
pieMargin: 20, //pie charts only - spacing around pie
pieLabelPos: 'inside',
lineWeight: 4, //for line and area - stroke weight
lineDots: 'double', //also available: 'single', false
dotInnerColor: "#ffffff", // only used for lineDots:'double'
barGroupMargin: 10,
barMargin: 1, //space around bars in bar chart (added to both sides of bar)
yLabelInterval: 30 //distance between y labels
Expand Down Expand Up @@ -280,6 +282,25 @@ $.fn.visualize = function(options, container){
.addClass('label');
});

var drawPoint = function (x,y,color,size) {
ctx.moveTo(x,y);
ctx.beginPath();
ctx.arc(x,y,size/2,0,2*Math.PI,false);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
var pointQueue = [];
var keyPoint = function(x,y,color) {
var size = o.lineWeight*Math.PI;
pointQueue.push(function() {
drawPoint(x,y,color,size);
if(o.lineDots === 'double') {
drawPoint(x,y,o.dotInnerColor,size-o.lineWeight*Math.PI/2);
}
});
};

//start from the bottom left
ctx.translate(0,zeroLoc);
//iterate and draw
Expand All @@ -289,23 +310,31 @@ $.fn.visualize = function(options, container){
ctx.lineJoin = 'round';
var points = this.points;
var integer = 0;
var color = this.color;
ctx.moveTo(0,-(points[0]*yScale));
keyPoint(0,-(points[0]*yScale),color);
$.each(points, function(){
if(o.lineDots) {
keyPoint(integer,-(this*yScale),color);
}
ctx.lineTo(integer,-(this*yScale));
integer+=xInterval;
});
ctx.strokeStyle = this.color;
ctx.strokeStyle = color;
ctx.stroke();
if(area){
ctx.lineTo(integer,0);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fillStyle = color;
ctx.globalAlpha = .3;
ctx.fill();
ctx.globalAlpha = 1.0;
}
else {ctx.closePath();}
$.each(pointQueue,function(){
pointQueue.shift().call();
});
});
},

Expand Down

0 comments on commit fe26bcd

Please sign in to comment.