This Project is for demonstrating the power of HTML5 standards using canvas and javascript. I started it to illustrate my own web site and decided to start an Open Source project, hopping that new contributors would help me developing and enhancing this small project. A demo is available on "MY CV" page, with a visual. (This project is licensed under the BSD License).
/*
** Copyrigth (c) 2011 ASOVA Core Labs ( http://www.asova.com/ )
** Created by Gökçe ASOVA ( gokce@asova.com )
** Date 17/10/2011 16:33
**
** CoreCharts.js - Version 0.01
**
** Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are met:
**
** 1. Redistributions of source code must retain the above copyright notice,
** this list of conditions and the following disclaimer.
** 2. Redistributions in binary form must reproduce the above copyright notice,
** this list of conditions and the following disclaimer in the documentation
** and/or other materials provided with the distribution.
** 3. Neither the name of ASOVA Core Labs nor the names of its contributors may
** be used to endorse or promote products derived from this software without
** specific prior written permission.
**
** THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
** EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
** DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY
** DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
** THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
function CoreCharts() {
// Default params(if not set by user)
this.canvasId = "foo";
this.canvasContext = "2d";
this.chartType = "bar";
this.width = 600;
this.height = 200;
this.fontFamily = "8pt Arial";
this.fontColor = "#000";
this.textAlign = "left";
this.titleLabel = ["TECHNICAL SKILLS*",0,30];
this.legendLabel = ["* THIS LIST IS NOT EXHAUSTIVE.",600,30];
this.titleAlign = "left";
this.legendAlign = "right";
this.barWidth = 38;
this.vLabels = ["Shit Hot","Smokin'",
"Pretty Good","Rookie", "Slow & Steady"];
this.hLabels = ["XHTML / HTML","Javascript / AJAX", "PHP","Ruby on Rails",
"SQL / PL-SQL","ASP / Vb / .NET", "Language C", "Obj-C",
"Python", "Perl", "XML / XSL / SOAP", "UNIX / Linux / Os X",
"Office / Adobe / ..." ];
this.chartData = [3,3,1,5,2,1,5,7,9,9,1,1,2];
this.vLabelColor = "#000";
this.hLabelColor = "#000";
this.titleLabelColor = "#000";
this.vAxisStartStep = 20;
this.vAxis = [78,200,78,0,0.5,"grey"];
this.hAxis = [78,200,600,200,0.5,"grey"];
this.vGrad = [5,1,"grey", true];
this.hGrad = [5,1,"grey", false];
this.hPadding = "2";
this.chartColors = ["#ccf","#aae"];
this.DrawChart = function() {
var cv = document.getElementById(this.canvasId);
if ((cv)) {
this.width = cv.width;
this.height = cv.height;
var ctx = cv.getContext(this.canvasContext);
ctx.save();
// Draw Title
ctx.font = this.fontFamily;
ctx.fillStyle = this.fontColor;
ctx.textAlign = this.titleAlign;
ctx.fillText(this.titleLabel[0],
this.titleLabel[1],
this.titleLabel[2]);
ctx.save();
// Draw Legend
ctx.fillStyle = this.fontColor;
ctx.textAlign = this.legendAlign;
ctx.fillText(this.legendLabel[0],
this.legendLabel[1],
this.legendLabel[2]);
ctx.restore();
ctx.translate(0,40);
// Draw vAxis
ctx.beginPath();
ctx.moveTo(this.vAxis[0], this.vAxis[1]);
ctx.lineTo(this.vAxis[2], this.vAxis[3]);
ctx.strokeStyle = this.vAxis[5];
ctx.lineWidth = this.vAxis[4];
ctx.stroke();
// Draw hAxis
ctx.beginPath();
ctx.moveTo(this.hAxis[0], this.hAxis[1]);
ctx.lineTo(this.hAxis[2], this.hAxis[3] );
ctx.strokeStyle = this.hAxis[5];
ctx.lineWidth = this.hAxis[4];
ctx.stroke();
// vAxis Graduation & Labels
if (this.vGrad[3] == true) {
var graduationStep = this.vAxis[1] / this.vAxisStartStep * 2;
var nLabel = 0 ;
var labelIndex = [];
for (index=this.vAxisStartStep;index < this.vAxis[1];
index=index + graduationStep * 2) {
ctx.beginPath();
ctx.moveTo(this.vAxis[0]-this.vGrad[0], index);
ctx.lineTo(this.vAxis[0],index );
ctx.strokeStyle = this.vGrad[2];
ctx.lineWidth = 0.5;
ctx.stroke();
labelIndex[nLabel] = index;
nLabel++;
}
ctx.font = "8pt Arial";
ctx.fillStyle = "grey";
ctx.textAlign = "right";
for (index=0; index < this.vLabels.length ;index++) {
ctx.fillText(this.vLabels[index],
this.vAxis[0]-this.vGrad[0]-2 ,labelIndex[index] + 3);
}
}
// Data Draw (Bars)
var xOrig = this.hAxis[0] + 3;
var yOrig = this.vAxisStartStep;
var yMax = this.vAxis[1] - 3;
var xWidth= this.barWidth;
var xStep = this.barWidth;
for (index=0; index < this.chartData.length; index++) {
ctx.beginPath();
var yStep = this.chartData[index];
ctx.rect(xOrig, (yOrig * yStep) - 1 , xWidth,
yMax - (yOrig * yStep -1) );
if (index%2 == 0)
ctx.fillStyle = this.chartColors[0];
else
ctx.fillStyle = this.chartColors[1];
ctx.fill();
var xOrig = xOrig + xStep + 2;
}
// hAxis Labels
ctx.font = "8pt Arial";
ctx.fillStyle = "grey";
ctx.textAlign = "right";
var newX = this.hAxis[0] + 24;
for (var i=0; i < this.hLabels.length; i++) {
ctx.save();
ctx.translate(newX,210);
ctx.rotate(-45);
ctx.fillText(this.hLabels[i], 0,0);
ctx.restore();
newX = newX + 40;
}
}
};
}
window.onload = function () {
skills = new CoreCharts();
skills.canvasId = "skills";
skills.titleLabel = ["TECHNICAL SKILLS*",0,30];
skills.legendLabel = ["* THIS LIST IS NOT EXHAUSTIVE.",600,30];
skills.vLabels = ["Shit Hot","Smokin'","Pretty Good","Rookie", "Slow & Steady"];
skills.hLabels = ["XHTML / HTML","Javascript / AJAX","PHP",
"Ruby on Rails","SQL / PL-SQL","ASP / Vb / .NET",
"Language C", "Obj-C", "Python", "Perl", "XML / XSL / SOAP",
"UNIX / Linux / Os X", "Office / Adobe / ..." ];
skills.chartData = [3,3,1,5,2,1,5,7,9,9,1,1,2];
skills.DrawChart();
}