Skip to content
This repository was archived by the owner on Mar 26, 2024. It is now read-only.

Add chartBar method #66

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add chartBar method #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23421ea
added chartBar method and build the new minified version
anubhavp28 Oct 30, 2017
ff02fe0
added chartBar method and build the new minified version
anubhavp28 Oct 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 233 additions & 17 deletions dist/origami.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* Date: 2016-10-29T20:51Z
* Date: 2017-10-30T17:49Z
*/

(function( window ) {
Expand Down Expand Up @@ -904,6 +904,186 @@ Origami.text = function(text, x, y, style) {
return this;
};

function ChartBar(config) {
var ctx = this.paper.ctx,
width = this.paper.width,
height = this.paper.height;

if (config.frame)
ctx.clearRect(0, 0, this.paper.width, this.paper.height);

var animation = config.animation;

var xPadding = 40;
var yPadding = 40;
var sets = config.datasets;

var gridLines = {
vertical: true,
horizontal: true
};

function getMaxOfArray(numArray) {
return Math.max.apply(null, numArray);
}

function getMinOfArray(numArray) {
return Math.min.apply(null, numArray);
}

function getMaxAndMin() {
var max = 0,
min = 0;

for (var i = 0; i < config.datasets.length; i++) {
var biggest, lowest;
biggest = getMaxOfArray(config.datasets[i].data);
lowest = getMinOfArray(config.datasets[i].data);

if (biggest > max) {
max = biggest;
}
if (lowest < min) {
min = lowest;
}
}
return {
max: max,
min: min
};
}

var maxAndMin = getMaxAndMin();
var maxY = Math.round(maxAndMin.max);
var minY = Math.round(maxAndMin.min);

var xScale = Math.floor((width - (xPadding*3)/2))/config.labels.length;

function getXPixel(i) {
return xPadding + xScale * i;
}

var yRange = maxY - minY;
var unRoundedTickGap = yRange / 10;
var magnitude = Math.ceil(Math.log10(unRoundedTickGap));
var roundedTickGap = ( (Math.round(unRoundedTickGap / Math.pow(10,magnitude-1))/10) * Math.pow(10,magnitude));
var lowerBound = roundedTickGap * Math.floor(minY/roundedTickGap);
var upperBound = roundedTickGap * Math.floor(1 + maxY/roundedTickGap);
var yScale = (height - ((3/2)*yPadding))/(upperBound - lowerBound);

function getYPixel(val) {
return height - (yScale * (val - lowerBound) + yPadding);
}

var gridLinesColor = '#e7e7e7';
if (config.gridLinesColor) {
gridLinesColor = config.gridLinesColor;
}

if (config.gridLines) {
if (config.gridLines.vertical === false)
gridLines.vertical = false;

if (config.gridLines.horizontal === false)
gridLines.horizontal = false;
}

ctx.fillStyle = '#5e5e5e';
if (config.labelColor) {
ctx.fillStyle = config.labelColor;
}

ctx.font = 'normal 11px Helvetica';
ctx.globalAlpha = 1;

// axes
ctx.beginPath();
ctx.strokeStyle=gridLinesColor;
ctx.lineWidth = 1.6;
ctx.moveTo(xPadding,yPadding/2);
ctx.lineTo(xPadding,height - yPadding);
ctx.lineTo(width - xPadding/2, height - yPadding);
ctx.stroke();

// vertical gridlines and label
ctx.textAlign = "center";
ctx.textBaseline = "alphabetic";
for (var i=0;i<config.labels.length;i++) {
if (gridLines.vertical) {
ctx.beginPath();
ctx.lineWidth = 0.8;
ctx.strokeStyle = gridLinesColor;
ctx.moveTo(getXPixel(i),height-yPadding + 5);
ctx.lineTo(getXPixel(i),yPadding/2);
ctx.stroke();
}

ctx.fillText(config.labels[i],(getXPixel(i) + getXPixel(i+1))/2 ,height - yPadding + 20);
}

// horizontal gridlines and data
ctx.textAlign = "right"
ctx.textBaseline = "middle";
for (var i = lowerBound; i <= upperBound; i += roundedTickGap) {
ctx.beginPath();
if (i!=0)
ctx.lineWidth = 0.8;
else
ctx.lineWidth = 2;
ctx.strokeStyle = gridLinesColor;
ctx.moveTo(xPadding - 5, getYPixel(i));
ctx.lineTo(width - (xPadding/2), getYPixel(i));
ctx.stroke();
ctx.fillText(i, xPadding - 10, getYPixel(i));
}

var barWidth = (0.75 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length);
var barPadding = 0.05 * (getXPixel(1) - getXPixel(0));
if (config.datasets.length > 1)
var barSpacing = parseFloat((0.15 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length - 1));
else
var barSpacing = 0;

// drawing bars
for (var i=0;i<config.labels.length;i++)
{
var x = getXPixel(i) + barPadding;
for (var j=0;j<config.datasets.length;j++)
{
var value = config.datasets[j].data[i];
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.fillStyle = "orange";
if (config.datasets[j].fillColor)
ctx.fillStyle = config.datasets[j].fillColor
ctx.fillRect(x,getYPixel(0),barWidth,getYPixel(value) - getYPixel(0));
ctx.lineWidth = 2;
if (config.datasets[j].borderWidth)
ctx.lineWidth = config.datasets[j].borderWidth;
ctx.strokeStyle= "orange";
if (config.datasets[j].borderColor) {
if (typeof(config.datasets[j].borderColor)=="string")
ctx.strokeStyle = config.datasets[j].borderColor;
else if (typeof(config.datasets[j].borderColor)=="object")
ctx.strokeStyle = config.datasets[j].borderColor[i];
}
ctx.moveTo(x,getYPixel(0));
ctx.lineTo(x,getYPixel(value));
ctx.lineTo(x+barWidth,getYPixel(value));
ctx.lineTo(x+barWidth,getYPixel(0));
ctx.stroke();
x += barWidth + barSpacing;
}
}

}

Screen.prototype.chartBar = ChartBar;

Origami.chartBar = function(config) {
queue('chartBar', config);
return this;
};
function ChartLine(config) {
var ctx = this.paper.ctx,
width = this.paper.width,
Expand Down Expand Up @@ -931,6 +1111,10 @@ function ChartLine(config) {
horizontal: true
};

var maxAndMin = getMaxAndMin();
var maxY = Math.round(maxAndMin.max);
var minY = Math.round(maxAndMin.min);

var gridLinesColor = '#e7e7e7';
if (config.gridLinesColor) {
gridLinesColor = config.gridLinesColor;
Expand Down Expand Up @@ -965,17 +1149,17 @@ function ChartLine(config) {
ctx.stroke();
}

ctx.fillText(config.labels[i], getXPixel(i) - config.labels[i].length * 2.5, height - yPadding + 22);
var str = String(config.labels[i])
ctx.fillText(str, getXPixel(i) - str.length * 2.5, height - yPadding + 22);
}

// Data
ctx.textAlign = "right"
ctx.textBaseline = "middle";
var maxY = getMaxY();
var gridItems = 10;
var variance = Math.round(Math.round(maxY / gridItems) / 10) * 10;
var gridItems = config.tense || 7;
var variance = Math.round(Math.round((maxY - minY) / gridItems) / 10) * 10;

for (var i = 0; i < maxY; i += variance) {
for (var i = minY + variance; i < maxY; i += variance) {
if (gridLines.horizontal) {
ctx.beginPath();
ctx.lineWidth = 0.8;
Expand All @@ -991,25 +1175,50 @@ function ChartLine(config) {
return Math.max.apply(null, numArray);
}

function getMaxY() {
var max = 0;
function getMinOfArray(numArray) {
return Math.min.apply(null, numArray);
}

function getMaxAndMin() {
var max = 0,
min = 0;

for (var i = 0; i < sets.length; i++) {
var m = getMaxOfArray(sets[i].data);
if (m > max) {
max = m;
var biggest, lowerst;
if (typeof(sets[i].data[0]) === 'object') {
biggest = getMaxOfArray(sets[i].data.map(function(x){
return x[1]
}));
lowerst = getMinOfArray(sets[i].data.map(function(x){
return x[1]
}));
} else {
biggest = getMaxOfArray(sets[i].data);
lowerst = getMinOfArray(sets[i].data);
}
if (biggest > max) {
max = biggest;
}
if (lowerst < min) {
min = lowerst;
}
}

max += yPadding - max % 10;
return max;
min -= yPadding + min % 10;
return {
max: max,
min: min
};
}

function getXPixel(val) {
return ((width - xPadding) / config.labels.length) * val + xPadding;
return parseFloat(((width - xPadding) / config.labels.length) * val + xPadding);
}

function getYPixel(val) {
return height - (((height - yPadding) / getMaxY()) * val) - yPadding;
var scale = maxY / (maxY - minY);
return parseFloat((height - (((height - yPadding) / maxY) * val)) * scale);
}

if (animation) {
Expand Down Expand Up @@ -1048,8 +1257,11 @@ function ChartLine(config) {
ctx.strokeStyle = line.borderColor;
ctx.moveTo(getXPixel(0), getYPixel(set.data[0]));

for (var x = 1; x < set.data.length; x++) {
ctx.lineTo(getXPixel(x), getYPixel(set.data[x]));
for (var x = 0; x < set.data.length; x++) {
if (typeof(set.data[x]) === 'object')
ctx.lineTo(getXPixel(set.data[x][0]), getYPixel(set.data[x][1]));
else
ctx.lineTo(getXPixel(x), getYPixel(set.data[x]));
}

ctx.stroke();
Expand All @@ -1068,7 +1280,11 @@ function ChartLine(config) {
for (var z = 0; z < set.data.length; z++) {
ctx.beginPath();
ctx.fillStyle = (set.pointsColor) ? set.pointsColor : 'rgb(75,75,75)';
ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true);
if (typeof(set.data[z]) === 'object')
ctx.arc(getXPixel(set.data[z][0]), getYPixel(set.data[z][1]), 4, 0, Math.PI * 2, true);
else
ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true);

ctx.fill();
ctx.closePath();
ctx.beginPath();
Expand Down
Loading