Garage Wine Co. Chile

/**
* ——————————————————————–
* jQuery-Plugin “fgCharting”
* by Scott Jehl, scott@filamentgroup.com
* http://www.filamentgroup.com
* reference article: http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/
* demo page: http://www.filamentgroup.com/examples/charting/
*
* Copyright (c) 2008 Filament Group, Inc
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Usage Notes: please refer to our article above for documentation
*
* Version: 1.0, 11.11.2007
* Changelog:
*
* ——————————————————————–
*/

//create Line graph function
$.fn.createLineGraph = function(tableData, filledLine){
//get passed values
var members = tableData.members();
var allData = tableData.allData();
var dataSum = tableData.dataSum();
var topValue = tableData.topValue();
var memberTotals = tableData.memberTotals();
var xLabels = tableData.xLabels();
var yLabels = tableData.yLabels();

if($(this).parents(‘.chartBlock’).size()==0) $(this).wrap(‘

‘);
if(!$(this).attr(’scalable’)){
$(this).width($(this).width()/10+’em’);
$(this).height($(this).height()/10+’em’);
$(this).attr(’scalable’, ‘true’);
}
//set xLabels width
var xInterval = Math.round($(this).width() / xLabels.length);
xInterval+= Math.round(xInterval / xLabels.length+1);

//write X labels
var ulID = $(this).attr(‘id’)+’_data’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(xLabels).each(function(){ $(‘#’+ulID).append(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘margin’: 0, ‘padding’:0, ‘list-style’: ‘none’, ‘float’: ‘left’, ‘width’: xInterval/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0,’clear’:'both’});

//write Y labels
var yScale = $(this).height() / topValue;
var liHeight = $(this).height() / yLabels.length;
liHeight += liHeight / yLabels.length;

var ulID = $(this).attr(‘id’)+’_dataY’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(yLabels).each(function(i){ $(‘#’+ulID).prepend(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘padding’:0, ‘list-style’: ‘none’, ‘height’: liHeight/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0, ‘position’:'absolute’, ‘top’: 0, ‘text-align’: ‘right’, ‘left’: ‘-5em’, ‘width’: ‘40px’});

var ctx = $(this).get(0);
ctx = ctx.getContext(‘2d’);
//ctx.restore();
ctx.clearRect(0,0, 1000, 1000);
ctx.save();
//start from the bottom left
ctx.translate(0,$(this).height());
for(var h=0; h ctx.beginPath();
ctx.lineWidth = '3';
ctx.lineJoin = 'round';
var points = members[h].points;
var integer = 0;
ctx.moveTo(0,-Math.round(points[0]*yScale));
for(var i=0; i ctx.lineTo(integer,-Math.round(points[i]*yScale));
integer+=xInterval;
}
ctx.strokeStyle = tableData.members()[h].color;
ctx.stroke();
if(filledLine){
ctx.lineTo(integer,0);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fillStyle = tableData.members()[h].color;
ctx.globalAlpha = .3;
ctx.fill();
ctx.globalAlpha = 1.0;
}
else ctx.closePath();
}
}

//create Line graph function
$.fn.createAdditiveLineGraph = function(tableData, filledLine){
//get passed values
var members = tableData.members();
var allData = tableData.allData();
var dataSum = tableData.dataSum();
var topValue = tableData.topValue();
var memberTotals = tableData.memberTotals();
var xLabels = tableData.xLabels();
var yLabels = tableData.yLabels();
var topYtotal = tableData.topYtotal();
var yLabelsAdditive = tableData.yLabelsAdditive();

if($(this).parents('.chartBlock').size()==0) $(this).wrap('

‘);
if(!$(this).attr(’scalable’)){
$(this).width($(this).width()/10+’em’);
$(this).height($(this).height()/10+’em’);
$(this).attr(’scalable’, ‘true’);
}
//set xLabels width
var xInterval = Math.round($(this).width() / xLabels.length);
xInterval+= Math.round(xInterval / xLabels.length+1);

//write X labels
var ulID = $(this).attr(‘id’)+’_data’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(xLabels).each(function(){ $(‘#’+ulID).append(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘margin’: 0, ‘padding’:0, ‘list-style’: ‘none’, ‘float’: ‘left’, ‘width’: xInterval/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0,’clear’:'both’});

//write Y labels
var yScale = $(this).height() / topYtotal;
var liHeight = $(this).height() / yLabelsAdditive.length;
liHeight += liHeight / yLabelsAdditive.length;

var ulID = $(this).attr(‘id’)+’_dataY’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(yLabelsAdditive).each(function(i){ $(‘#’+ulID).prepend(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘padding’:0, ‘list-style’: ‘none’, ‘height’: liHeight/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0, ‘position’:'absolute’, ‘top’: 0, ‘text-align’: ‘right’, ‘left’: ‘-5em’, ‘width’: ‘40px’});

var ctx = $(this).get(0);
ctx = ctx.getContext(‘2d’);
//ctx.restore();
ctx.clearRect(0,0, 1000, 1000);
ctx.save();
//start from the bottom left
ctx.translate(0,$(this).height());
for(var h=0; h ctx.beginPath();
ctx.lineWidth = '3';
ctx.lineJoin = 'round';
var points = members[h].points;
var prevPoints = [];
if(members[h+1]){
prevPoints = members[h+1].points;
}
var nextPrevPoints = [];
if(members[h+2]){
nextPrevPoints = members[h+2].points;
}
var integer = 0;
ctx.moveTo(0,Math.round(-points[0]*yScale));
for(var i=0; i var prevPoint = 0;
var nextPrevPoint = 0;
if(prevPoints[i]) prevPoint = prevPoints[i];
if(nextPrevPoints[i]) nextPrevPoint = nextPrevPoints[i];
ctx.lineTo(integer,Math.round((-points[i] - prevPoint - nextPrevPoint)*yScale));
integer+=xInterval;
}
ctx.strokeStyle = tableData.members()[h].color;
ctx.stroke();
if(filledLine){
ctx.lineTo(integer,0);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fillStyle = tableData.members()[h].color;
//ctx.globalAlpha = 0.9;
ctx.fill();
//ctx.globalAlpha = 1.0;
}
else ctx.closePath();
}
}

//create pie chart function
//Credit: Some of the ideas for this pie chart plotting were borrowed from Plotkit http://www.liquidx.net/plotkit/.
$.fn.createPieChart = function(tableData){
//get passed values
var members = tableData.members();
var allData = tableData.allData();
var dataSum = tableData.dataSum();
var topValue = tableData.topValue();
var memberTotals = tableData.memberTotals();
var xLabels = tableData.xLabels();
var yLabels = tableData.yLabels();

if($(this).parents('.chartBlock').size()==0) $(this).wrap('

‘);
if(!$(this).attr(’scalable’)){
$(this).width($(this).width()/10+’em’);
$(this).height($(this).height()/10+’em’);
$(this).attr(’scalable’, ‘true’);
}

function toRad(integer){
return (Math.PI/180)*integer;
}

var ctx = $(this).get(0);
ctx = ctx.getContext(‘2d’);
//ctx.restore();
ctx.clearRect(0,0, 1000, 1000);
ctx.save();
var centerx = $(this).width()/2;
var centery = $(this).height()/2;
var radius = $(this).height()/2-20;
//full circle – not needed in the end
ctx.arc(centerx, centery, radius, toRad(0), toRad(360), true);
ctx.fillStyle = ‘#ccc’;
ctx.fill();
var counter = 0.0;

var ulID = $(this).attr(‘id’)+’_data’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);

//draw the pie pieces
$(memberTotals).each(function(i){
var fraction = 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 = tableData.members()[i].color;
ctx.fill();

// draw labels
var sliceMiddle = (counter + fraction/2)
var labelx = centerx + Math.sin(sliceMiddle * Math.PI * 2) * (radius/2);
var labely = centery – Math.cos(sliceMiddle * Math.PI * 2) * (radius/2);

$(‘#’+ulID).append(‘

‘+Math.round(fraction*100)+’%

‘);

counter+=fraction;
});

}//end create pie

//create bar graph function
$.fn.createBarGraph = function(tableData){
//get passed values
var members = tableData.members();
var allData = tableData.allData();
var dataSum = tableData.dataSum();
var topValue = tableData.topValue();
var memberTotals = tableData.memberTotals();
var xLabels = tableData.xLabels();
var yLabels = tableData.yLabels();

if($(this).parents(‘.chartBlock’).size()==0) $(this).wrap(‘

‘);
if(!$(this).attr(’scalable’)){
$(this).width($(this).width()/10+’em’);
$(this).height($(this).height()/10+’em’);
$(this).attr(’scalable’, ‘true’);
}

//set xLabels width
var xInterval = Math.round($(this).width() / xLabels.length);
//xInterval+= xInterval / xLabels.length;

//write X labels
var ulID = $(this).attr(‘id’)+’_data’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(xLabels).each(function(){ $(‘#’+ulID).append(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘margin’: 0, ‘padding’:0, ‘list-style’: ‘none’, ‘float’: ‘left’, ‘width’: xInterval/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0});

//write Y labels
var yScale = $(this).height() / topValue;
var liHeight = $(this).height() / yLabels.length;
liHeight += liHeight / yLabels.length;

var ulID = $(this).attr(‘id’)+’_dataY’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(yLabels).each(function(i){ $(‘#’+ulID).prepend(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘padding’:0, ‘list-style’: ‘none’, ‘height’: liHeight/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0, ‘position’:'absolute’, ‘top’: 0, ‘text-align’: ‘right’, ‘left’: ‘-5em’, ‘width’: ‘40px’});

var ctx = $(this).get(0);
ctx = ctx.getContext(‘2d’);
//ctx.restore();
ctx.clearRect(0,0, 1000, 1000);
ctx.save();
//start from the bottom left
ctx.translate(0,$(this).height());
for(var h=0; h ctx.beginPath();
var linewidth = Math.round(xInterval / (members.length+1));
ctx.lineWidth = linewidth;
var points = members[h].points;
var integer = 0;

for(var i=0; i ctx.moveTo(Math.round(integer+(h*linewidth)), 0);
ctx.lineTo(Math.round(integer+(h*linewidth)),Math.round(-points[i]*yScale));
integer+=xInterval;
}

ctx.strokeStyle = tableData.members()[h].color;
ctx.stroke();
ctx.closePath();
}
}

//create bar graph function
$.fn.createAdditiveBarGraph = function(tableData){
//get passed values
var members = tableData.members();
var allData = tableData.allData();
var dataSum = tableData.dataSum();
var topValue = tableData.topValue();
var memberTotals = tableData.memberTotals();
var xLabels = tableData.xLabels();
var yLabels = tableData.yLabels();
var topYtotal = tableData.topYtotal();
var yLabelsAdditive = tableData.yLabelsAdditive();

if($(this).parents('.chartBlock').size()==0) $(this).wrap('

‘);
if(!$(this).attr(’scalable’)){
$(this).width($(this).width()/10+’em’);
$(this).height($(this).height()/10+’em’);
$(this).attr(’scalable’, ‘true’);
}

//set xLabels width
var xInterval = Math.round($(this).width() / xLabels.length);
//xInterval+= xInterval / xLabels.length;

//write X labels
var ulID = $(this).attr(‘id’)+’_data’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(xLabels).each(function(){ $(‘#’+ulID).append(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘margin’: 0, ‘padding’:0, ‘list-style’: ‘none’, ‘float’: ‘left’, ‘width’: xInterval/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0});

//write Y labels
var yScale = $(this).height() / topYtotal;
var liHeight = $(this).height() / yLabelsAdditive.length;
liHeight += liHeight / yLabelsAdditive.length;

var ulID = $(this).attr(‘id’)+’_dataY’;
$(‘#’+ulID).remove();
$(this).after(‘

‘);
$(yLabelsAdditive).each(function(i){ $(‘#’+ulID).prepend(‘

‘+this+’

‘);});
$(‘#’+ulID+’ li’).css({‘padding’:0, ‘list-style’: ‘none’, ‘height’: liHeight/10+’em’});
$(‘#’+ulID).css({‘margin’: 0, ‘padding’: 0, ‘position’:'absolute’, ‘top’: 0, ‘text-align’: ‘right’, ‘left’: ‘-5em’, ‘width’: ‘40px’});

var ctx = $(this).get(0);
ctx = ctx.getContext(‘2d’);
//ctx.restore();
ctx.clearRect(0,0, 1000, 1000);
ctx.save();
//start from the bottom left
ctx.translate(0,$(this).height());
for(var h=0; h ctx.beginPath();
var linewidth = Math.round(xInterval*.8);
ctx.lineWidth = linewidth;
var points = members[h].points;
var prevPoints = [];
if(members[h+1]){
prevPoints = members[h+1].points;
}
var nextPrevPoints = [];
if(members[h+2]){
nextPrevPoints = members[h+2].points;
}
var integer = 0;

for(var i=0; i var prevPoint = 0;
var nextPrevPoint = 0;
if(prevPoints[i]) prevPoint = prevPoints[i];
if(nextPrevPoints[i]) nextPrevPoint = nextPrevPoints[i];

ctx.moveTo(integer, 0);
ctx.lineTo(integer,Math.round((-points[i] - prevPoint - nextPrevPoint)*yScale));
integer+=xInterval;
}

ctx.strokeStyle = tableData.members()[h].color;
ctx.stroke();
ctx.closePath();
}
}

//graph data from table function
$.fn.getTableData = function(chartDimensions){
var tableObj = this;
var colors = ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'];
var tableData = {
members: function(){
var members = [];
tableObj.find('tr:gt(0)').each(function(i){
members[i] = {};
members[i].points = [];
members[i].color = colors[i];
$(this).find('td').each(function(){
members[i].points.push($(this).text()*1);
});
});
//sort members array
members.sort(function(a,b){
var x = a.points.join(',').split(',');
var y = b.points.join(',').split(',');
var xSum = 0;
var ySum = 0;
$(x).each(function(){
xSum += parseInt(this);
});
$(y).each(function(){
ySum += parseInt(this);
});
return ((xSum < ySum) ? -1 : ((xSum > ySum) ? 1 : 0));
});
members.reverse();
return members;

},
allData: function(){
var allData = [];
$(this.members()).each(function(){
allData.push(this.points);
});
return allData;
},
dataSum: function(){
var dataSum = 0;
var allData = this.allData().join(‘,’).split(‘,’);
$(allData).each(function(){
dataSum += parseInt(this);
});
return dataSum
},
topValue: function(){
var topValue = 0;
var allData = this.allData().join(‘,’).split(‘,’);
$(allData).each(function(){
if(parseInt(this)>topValue) topValue = parseInt(this);
});
return topValue;
},
memberTotals: function(){
var memberTotals = [];
var members = this.members();
$(members).each(function(l){
var count = 0;
$(members[l].points).each(function(m){
count +=members[l].points[m];
});
memberTotals.push(count);
});
return memberTotals;
},
yTotals: function(){
var yTotals = [];
var members = this.members();
var loopLength = this.xLabels().length;
for(var i = 0; i yTotals[i] =[];
var thisTotal = 0;
$(members).each(function(l){
yTotals[i].push(this.points[i]);
});
yTotals[i].join(',').split(',');
$(yTotals[i]).each(function(){
thisTotal += parseInt(this);
});
yTotals[i] = thisTotal;

}
return yTotals;
},
topYtotal: function(){
var topYtotal = 0;
var yTotals = this.yTotals().join(',').split(',');
$(yTotals).each(function(){
if(parseInt(this)>topYtotal) topYtotal = parseInt(this);
});
return topYtotal;
},
xLabels: function(){
var xLabels = [];
tableObj.find(‘tr:eq(0) th’).each(function(){
xLabels.push($(this).html());
});
return xLabels;
},
yLabels: function(){
var yLabels = [];
var chartHeight = chartDimensions.height;
var numLabels = chartHeight / 30;
var loopInterval = Math.round(this.topValue() / numLabels);

for(var j=0; j<=numLabels; j++){
yLabels.push(j*loopInterval);
}
if(yLabels[numLabels] != this.topValue()) {
yLabels.pop();
yLabels.push(this.topValue());
}
return yLabels;
},
yLabelsAdditive: function(){
var yLabelsAdditive = [];
var chartHeight = chartDimensions.height;
var numLabels = chartHeight / 30;
var loopInterval = Math.round(this.topYtotal() / numLabels);

for(var j=0; j<=numLabels; j++){
yLabelsAdditive.push(j*loopInterval);
}
if(yLabelsAdditive[numLabels] != this.topYtotal()) {
yLabelsAdditive.pop();
yLabelsAdditive.push(this.topYtotal());
}
return yLabelsAdditive;
}
}
if(!$(this).attr('colored')){
$(this).find('tr:gt(0) th').each(function(i){
$(this).css({'background-color': colors[i]});
});
$(this).attr('colored', 'true');
}
return tableData;

}//end graphData

$.fgCharting = function(){
$('[class^=fgCharting_]').each(function(){
//get the class that contains fgCharting settings and set it to chartClass var
var thisClass = $(this).attr('class');
var chartClass = '';
thisClass = thisClass.split(' ');
$(thisClass).each(function(){
if(this.match('fgCharting_')) chartClass = this;
});

//parse the chartClass var for chart settings
var chartClass = chartClass.split('_');
var chartSrc = '';
var chartType = '';

$(chartClass).each(function(){
if(this.match('src-')) chartSrc = '#'+this.split('-')[1];
if(this.match('type-')) chartType = this.split('-')[1];
});

var chartDimensions = {};
chartDimensions.width = $(this).width();
chartDimensions.height = $(this).height();

//make sure data source and type is avail
if($(chartSrc).size() > 0 && chartType != ”){
//get data from source table
var tableData = $(chartSrc).getTableData(chartDimensions);
//create chart type specified
switch (chartType){
case ‘line’: $(this).createLineGraph(tableData);
break
case ‘filledLine’: $(this).createLineGraph(tableData, true);
break
case ‘additiveLine’: $(this).createAdditiveLineGraph(tableData);
break
case ‘additiveFilledLine’: $(this).createAdditiveLineGraph(tableData, true);
break
case ‘pie’: $(this).createPieChart(tableData);
break
case ‘bar’: $(this).createBarGraph(tableData);
break
case ‘additiveBar’: $(this).createAdditiveBarGraph(tableData);
break
}
}
});
}

Trackback URL