8000 added chartBar method and build the new minified version · raphamorim/origami.js@ff02fe0 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Mar 26, 2024. It is now read-only.

Commit ff02fe0

Browse files
anubhavp28anubhavp28
committed
added chartBar method and build the new minified version
1 parent 23421ea commit ff02fe0

File tree

3 files changed

+235
-19
lines changed

3 files changed

+235
-19
lines changed

‎dist/origami.js

Lines changed: 233 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* You should have received a copy of the GNU General Public License
1818
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1919
*
20-
* Date: 2016-10-29T20:51Z
20+
* Date: 2017-10-30T17:49Z
2121
*/
2222

2323
(function( window ) {
@@ -904,6 +904,186 @@ Origami.text = function(text, x, y, style) {
904904
return this;
905905
};
906906

907+
function ChartBar(config) {
908+
var ctx = this.paper.ctx,
909+
width = this.paper.width,
910+
height = this.paper.height;
911+
912+
if (config.frame)
913+
ctx.clearRect(0, 0, this.paper.width, this.paper.height);
914+
915+
var animation = config.animation;
916+
917+
var xPadding = 40;
918+
var yPadding = 40;
919+
var sets = config.datasets;
920+
921+
var gridLines = {
922+
vertical: true,
923+
horizontal: true
924+
};
925+
926+
function getMaxOfArray(numArray) {
927+
return Math.max.apply(null, numArray);
928+
}
929+
930+
function getMinOfArray(numArray) {
931+
return Math.min.apply(null, numArray);
932+
}
933+
934+
function getMaxAndMin() {
935+
var max = 0,
936+
min = 0;
937+
938+
for (var i = 0; i < config.datasets.length; i++) {
939+
var biggest, lowest;
940+
biggest = getMaxOfArray(config.datasets[i].data);
941+
lowest = getMinOfArray(config.datasets[i].data);
942+
943+
if (biggest > max) {
944+
max = biggest;
945+
}
946+
if (lowest < min) {
947+
min = lowest;
948+
}
949+
}
950+
return {
951+
max: max,
952+
min: min
953+
};
954+
}
955+
956+
var maxAndMin = getMaxAndMin();
957+
var maxY = Math.round(maxAndMin.max);
958+
var minY = Math.round(maxAndMin.min);
959+
960+
var xScale = Math.floor((width - (xPadding*3)/2))/config.labels.length;
961+
962+
function getXPixel(i) {
963+
return xPadding + xScale * i;
964+
}
965+
966+
var yRange = maxY - minY;
967+
var unRoundedTickGap = yRange / 10;
968+
var magnitude = Math.ceil(Math.log10(unRoundedTickGap));
969+
var roundedTickGap = ( (Math.round(unRoundedTickGap / Math.pow(10,magnitude-1))/10) * Math.pow(10,magnitude));
970+
var lowerBound = roundedTickGap * Math.floor(minY/roundedTickGap);
971+
var upperBound = roundedTickGap * Math.floor(1 + maxY/roundedTickGap);
972+
var yScale = (height - ((3/2)*yPadding))/(upperBound - lowerBound);
973+
974+
function getYPixel(val) {
975+
return height - (yScale * (val - lowerBound) + yPadding);
976+
}
977+
978+
var gridLinesColor = '#e7e7e7';
979+
if (config.gridLinesColor) {
980+
gridLinesColor = config.gridLinesColor;
981+
}
982+
983+
if (config.gridLines) {
984+
if (config.gridLines.vertical === false)
985+
gridLines.vertical = false;
986+
987+
if (config.gridLines.horizontal === false)
988+
gridLines.horizontal = false;
989+
}
990+
991+
ctx.fillStyle = '#5e5e5e';
992+
if (config.labelColor) {
993+
ctx.fillStyle = config.labelColor;
994+
}
995+
996+
ctx.font = 'normal 11px Helvetica';
997+
ctx.globalAlpha =< 8000 /span> 1;
998+
999+
// axes
1000+
ctx.beginPath();
1001+
ctx.strokeStyle=gridLinesColor;
1002+
ctx.lineWidth = 1.6;
1003+
ctx.moveTo(xPadding,yPadding/2);
1004+
ctx.lineTo(xPadding,height - yPadding);
1005+
ctx.lineTo(width - xPadding/2, height - yPadding);
1006+
ctx.stroke();
1007+
1008+
// vertical gridlines and label
1009+
ctx.textAlign = "center";
1010+
ctx.textBaseline = "alphabetic";
1011+
for (var i=0;i<config.labels.length;i++) {
1012+
if (gridLines.vertical) {
1013+
ctx.beginPath();
1014+
ctx.lineWidth = 0.8;
1015+
ctx.strokeStyle = gridLinesColor;
1016+
ctx.moveTo(getXPixel(i),height-yPadding + 5);
1017+
ctx.lineTo(getXPixel(i),yPadding/2);
< 8000 /code>1018+
ctx.stroke();
1019+
}
1020+
1021+
ctx.fillText(config.labels[i],(getXPixel(i) + getXPixel(i+1))/2 ,height - yPadding + 20);
1022+
}
1023+
1024+
// horizontal gridlines and data
1025+
ctx.textAlign = "right"
1026+
ctx.textBaseline = "middle";
1027+
for (var i = lowerBound; i <= upperBound; i += roundedTickGap) {
1028+
ctx.beginPath();
1029+
if (i!=0)
1030+
ctx.lineWidth = 0.8;
1031+
else
1032+
ctx.lineWidth = 2;
1033+
ctx.strokeStyle = gridLinesColor;
1034+
ctx.moveTo(xPadding - 5, getYPixel(i));
1035+
ctx.lineTo(width - (xPadding/2), getYPixel(i));
1036+
ctx.stroke();
1037+
ctx.fillText(i, xPadding - 10, getYPixel(i));
1038+
}
1039+
1040+
var barWidth = (0.75 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length);
1041+
var barPadding = 0.05 * (getXPixel(1) - getXPixel(0));
1042+
if (config.datasets.length > 1)
1043+
var barSpacing = parseFloat((0.15 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length - 1));
1044+
else
1045+
var barSpacing = 0;
1046+
1047+
// drawing bars
1048+
for (var i=0;i<config.labels.length;i++)
1049+
{
1050+
var x = getXPixel(i) + barPadding;
1051+
for (var j=0;j<config.datasets.length;j++)
1052+
{
1053+
var value = config.datasets[j].data[i];
1054+
ctx.beginPath();
1055+
ctx.globalAlpha = 0.5;
1056+
ctx.fillStyle = "orange";
1057+
if (config.datasets[j].fillColor)
1058+
ctx.fillStyle = config.datasets[j].fillColor
1059+
ctx.fillRect(x,getYPixel(0),barWidth,getYPixel(value) - getYPixel(0));
1060+
ctx.lineWidth = 2;
1061+
if (config.datasets[j].borderWidth)
1062+
ctx.lineWidth = config.datasets[j].borderWidth;
1063+
ctx.strokeStyle= "orange";
1064+
if (config.datasets[j].borderColor) {
1065+
if (typeof(config.datasets[j].borderColor)=="string")
1066+
ctx.strokeStyle = config.datasets[j].borderColor;
1067+
else if (typeof(config.datasets[j].borderColor)=="object")
1068+
ctx.strokeStyle = config.datasets[j].borderColor[i];
1069+
}
1070+
ctx.moveTo(x,getYPixel(0));
1071+
ctx.lineTo(x,getYPixel(value));
1072+
ctx.lineTo(x+barWidth,getYPixel(value));
1073+
ctx.lineTo(x+barWidth,getYPixel(0));
1074+
ctx.stroke();
1075+
x += barWidth + barSpacing;
1076+
}
1077+
}
1078+
1079+
}
1080+
1081+
Screen.prototype.chartBar = ChartBar;
1082+
1083+
Origami.chartBar = function(config) {
1084+
queue('chartBar', config);
1085+
return this;
1086+
};
9071087
function ChartLine(config) {
9081088
var ctx = this.paper.ctx,
9091089
width = this.paper.width,
@@ -931,6 +1111,10 @@ function ChartLine(config) {
9311111
horizontal: true
9321112
};
9331113

1114+
var maxAndMin = getMaxAndMin();
1115+
var maxY = Math.round(maxAndMin.max);
1116+
var minY = Math.round(maxAndMin.min);
1117+
9341118
var gridLinesColor = '#e7e7e7';
9351119
if (config.gridLinesColor) {
9361120
gridLinesColor = config.gridLinesColor;
@@ -965,17 +1149,17 @@ function ChartLine(config) {
9651149
ctx.stroke();
9661150
}
9671151

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

9711156
// Data
9721157
ctx.textAlign = "right"
9731158
ctx.textBaseline = "middle";
974-
var maxY = getMaxY();
975-
var gridItems = 10;
976-
var variance = Math.round(Math.round(maxY / gridItems) / 10) * 10;
1159+
var gridItems = config.tense || 7;
1160+
var variance = Math.round(Math.round((maxY - minY) / gridItems) / 10) * 10;
9771161

978-
for (var i = 0; i < maxY; i += variance) {
1162+
for (var i = minY + variance; i < maxY; i += variance) {
9791163
if (gridLines.horizontal) {
9801164
ctx.beginPath();
9811165
ctx.lineWidth = 0.8;
@@ -991,25 +1175,50 @@ function ChartLine(config) {
9911175
return Math.max.apply(null, numArray);
9921176
}
9931177

994-
function getMaxY() {
995-
var max = 0;
1178+
function getMinOfArray(numArray) {
1179+
return Math.min.apply(null, numArray);
1180+
}
1181+
1182+
function getMaxAndMin() {
1183+
var max = 0,
1184+
min = 0;
9961185

9971186
for (var i = 0; i < sets.length; i++) {
998-
var m = getMaxOfArray(sets[i].data);
999-
if (m > max) {
1000-
max = m;
1187+
var biggest, lowerst;
1188+
if (typeof(sets[i].data[0]) === 'object') {
1189+
biggest = getMaxOfArray(sets[i].data.map(function(x){
1190+
return x[1]
1191+
}));
1192+
lowerst = getMinOfArray(sets[i].data.map(function(x){
1193+
return x[1]
1194+
}));
1195+
} else {
1196+
biggest = getMaxOfArray(sets[i].data);
1197+
lowerst = getMinOfArray(sets[i].data);
1198+
}
1199+
if (biggest > max) {
1200+
max = biggest;
1201+
}
1202+
if (lowerst < min) {
1203+
min = lowerst;
10011204
}
10021205
}
1206+
10031207
max += yPadding - max % 10;
1004-
return max;
1208+
min -= yPadding + min % 10;
1209+
return {
1210+
max: max,
1211+
min: min
1212+
};
10051213
}
10061214

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

10111219
function getYPixel(val) {
1012-
return height - (((height - yPadding) / getMaxY()) * val) - yPadding;
1220+
var scale = maxY / (maxY - minY);
1221+
return parseFloat((height - (((height - yPadding) / maxY) * val)) * scale);
10131222
}
10141223

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

1051-
for (var x = 1; x < set.data.length; x++) {
1052-
ctx.lineTo(getXPixel(x), getYPixel(set.data[x]));
1260+
for (var x = 0; x < set.data.length; x++) {
1261+
if (typeof(set.data[x]) === 'object')
1262+
ctx.lineTo(getXPixel(set.data[x][0]), getYPixel(set.data[x][1]));
1263+
else
1264+
ctx.lineTo(getXPixel(x), getYPixel(set.data[x]));
10531265
}
10541266

10551267
ctx.stroke();
@@ -1068,7 +1280,11 @@ function ChartLine(config) {
10681280
for (var z = 0; z < set.data.length; z++) {
10691281
ctx.beginPath();
10701282
ctx.fillStyle = (set.pointsColor) ? set.pointsColor : 'rgb(75,75,75)';
1071-
ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true);
1283+
if (typeof(set.data[z]) === 'object')
1284+
ctx.arc(getXPixel(set.data[z][0]), getYPixel(set.data[z][1]), 4, 0, Math.PI * 2, true);
1285+
else
1286+
ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true);
1287+
10721288
ctx.fill();
10731289
ctx.closePath();
10741290
ctx.beginPath();

0 commit comments

Comments
 (0)
0