Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 79d2c7c

Browse files
barszczmmbarszczmm
committed
added animations for horizontal bar charts
1 parent 5436b98 commit 79d2c7c

File tree

2 files changed

+154
-20
lines changed

2 files changed

+154
-20
lines changed

‎awesomechart.js

Lines changed: 148 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,11 @@ function AwesomeChart(canvasElementId){
218218
this.drawExplodedPieChart();
219219
}
220220
}else if(this.chartType == "horizontal bars"){
221-
this.drawVerticalBarChart();
221+
if(this.animate) {
222+
this.animateVerticalBarChart();
223+
}else{
224+
this.drawVerticalBarChart();
225+
}
222226
}else if(this.chartType == "pareto"){
223227
this.drawParetoChart();
224228
}else{
@@ -232,8 +236,9 @@ function AwesomeChart(canvasElementId){
232236
this.drawTitleAndBorders();
233237

234238
}
235-
236-
239+
240+
241+
237242
this.drawTitleAndBorders = function() {
238243
var context = this.ctx;
239244

@@ -262,8 +267,9 @@ function AwesomeChart(canvasElementId){
262267

263268
context.globalCompositeOperation = 'source-over';
264269
}
265-
266-
270+
271+
272+
267273
this.drawBarChart = function(){
268274
var context = this.ctx;
269275

@@ -372,8 +378,9 @@ function AwesomeChart(canvasElementId){
372378
x = x + barWidth + this.barHGap;
373379
}
374380
}
375-
376-
381+
382+
383+
377384
this.animateBarChart = function() {
378385
var aw = this,
379386
numFrames = this.animationFrames,
@@ -456,8 +463,9 @@ function AwesomeChart(canvasElementId){
456463
updateBarChart();
457464

458465
}
459-
460-
466+
467+
468+
461469
this.drawVerticalBarChart = function(){
462470
var context = this.ctx;
463471

@@ -472,12 +480,12 @@ function AwesomeChart(canvasElementId){
472480
var maxData = this.data.max();
473481
var minData = this.data.min();
474482

483+
var marginLeft = this.marginLeft;
475484
if(this.title!=null){
476-
this.marginLeft += this.titleFontHeight + this.titleMargin;
485+
marginLeft += this.titleFontHeight + this.titleMargin;
477486
}
478487

479-
var barWidth = (this.width - this.marginLeft
480-
- this.marginRight - (n-1) * this.barHGap) / n;
488+
var barWidth = (this.width - marginLeft - this.marginRight - (n-1) * this.barHGap) / n;
481489

482490
context.font = this.labelFontStyle + ' ' + this.labelFontHeight + 'px '+ this.labelFont;
483491
var maxLabelWidth = 0;
@@ -517,11 +525,12 @@ function AwesomeChart(canvasElementId){
517525
var maxBarHeight = Math.max(Math.abs(barBottomY - barMaxTopY), Math.abs(barBottomY - barMinTopY));
518526
var maxBarAbsData = Math.max(Math.abs(minData), Math.abs(maxData));
519527

520-
var x = this.marginLeft;
528+
var x = marginLeft;
521529
var y = barBottomY;
522530
var barHeight = 0;
523531

524532
var di = 0;
533+
525534
for(var i=0; i<this.data.length; i++){
526535
di = this.data[i];
527536

@@ -564,7 +573,7 @@ function AwesomeChart(canvasElementId){
564573

565574

566575
context.save();
567-
context.translate(x + barWidth/2 , barBottomY - barHeight);
576+
context.translate(x + barWidth/2, barBottomY - barHeight);
568577
context.rotate(-Math.PI/2);
569578
context.textBaseline = 'top';
570579
if(this.labels[i]){
@@ -589,17 +598,138 @@ function AwesomeChart(canvasElementId){
589598
context.textAlign = 'right';
590599
context.fillText(di, -this.labelMargin, 0);
591600
}
592-
593-
context.restore();
594601

602+
context.restore();
595603

596604
//Update x:
597605

598606
x = x + barWidth + this.barHGap;
599607
}
608+
600609
context.restore();
610+
601611
}
602612

613+
614+
615+
this.animateVerticalBarChart = function() {
616+
var aw = this,
617+
numFrames = this.animationFrames,
618+
currentFrame = 0,
619+
620+
maxData = this.data.max(),
621+
minData = this.data.min(),
622+
dataLen = this.data.length,
623+
624+
context = this.ctx,
625+
626+
marginLeft = this.marginLeft
627+
marginTop = this.marginTop
628+
marginTopCurrent = 0;
629+
630+
631+
if(this.title!=null){
632+
marginLeft += this.titleFontHeight + this.titleMargin;
633+
}
634+
635+
var barWidth = (this.width - marginLeft - this.marginRight - (dataLen-1) * this.barHGap) / dataLen;
636+
637+
context.font = this.labelFontStyle + ' ' + this.labelFontHeight + 'px '+ this.labelFont;
638+
var maxLabelWidth = 0;
639+
var labelWidth = 0;
640+
for(var i=0; i<this.labels.length; i++){
641+
labelWidth = context.measureText(this.labels[i]).width;
642+
if(labelWidth>maxLabelWidth){
643+
maxLabelWidth = labelWidth;
644+
}
645+
}
646+
647+
context.font = this.dataValueFontStyle + ' ' + this.dataValueFontHeight + 'px '+ this.dataValueFont;
648+
var maxDataValueWidth = 0;
649+
var dataValueWidth = 0;
650+
for(var i=0; i<dataLen; i++){
651+
dataValueWidth = context.measureText(this.data[i]).width;
652+
if(dataValueWidth>maxDataValueWidth){
653+
maxDataValueWidth = dataValueWidth;
654+
}
655+
}
656+
657+
var barMaxTopY = this.marginTop + Math.max( (this.labelMargin + maxLabelWidth), (this.dataValueMargin + maxDataValueWidth) );
658+
659+
var barMinTopY = this.height - this.marginBottom;
660+
661+
var barBottomY = this.height - this.marginBottom;
662+
663+
if(minData<0){
664+
665+
barMinTopY = this.height - this.marginBottom - this.labelMargin - this.labelFontHeight - this.dataValueMargin - this.dataValueFontHeight;
666+
667+
barBottomY = barMinTopY + ((this.height - this.marginBottom - barMaxTopY - this.labelMargin - this.labelFontHeight - this.dataValueMargin - this.dataValueFontHeight) * minData) / (Math.abs(minData)+maxData);
668+
669+
}
670+
671+
672+
var maxBarHeight = Math.max(Math.abs(barBottomY - barMaxTopY), Math.abs(barBottomY - barMinTopY));
673+
var maxBarAbsData = Math.max(Math.abs(minData), Math.abs(maxData));
674+
675+
676+
var belowZeroMaxBarHeight = 0;
677+
if(minData<0){
678+
belowZeroMaxBarHeight = Math.abs(minData * maxBarHeight / maxBarAbsData);
679+
}
680+
681+
var chartAreaHeight = maxData * maxBarHeight / maxBarAbsData + belowZeroMaxBarHeight,
682+
changeOfMarginBottom = 0,
683+
changeOfMarginTop = 0;
684+
685+
this.marginBottom += belowZeroMaxBarHeight;
686+
this.marginTop += chartAreaHeight - belowZeroMaxBarHeight;
687+
changeOfMarginBottom = belowZeroMaxBarHeight / numFrames;
688+
changeOfMarginTop = (chartAreaHeight - belowZeroMaxBarHeight) / numFrames;
689+
690+
var updateVerticalBarChart = function() {
691+
if(currentFrame++ < numFrames) {
692+
693+
aw.marginBottom -= changeOfMarginBottom;
694+
aw.marginTop -= changeOfMarginTop;
695+
696+
aw.ctx.clearRect(0, 0, aw.width, aw.height);
697+
aw.drawVerticalBarChart();
698+
699+
marginTopCurrent = aw.marginTop;
700+
aw.marginTop = marginTop;
701+
aw.drawTitleAndBorders();
702+
aw.marginTop = marginTopCurrent;
703+
704+
// Standard
705+
if (typeof(window.requestAnimationFrame) == 'function') {
706+
window.requestAnimationFrame(updateVerticalBarChart);
707+
708+
// IE 10+
709+
} else if (typeof(window.msRequestAnimationFrame) == 'function') {
710+
window.msRequestAnimationFrame(updateVerticalBarChart);
711+
712+
// Chrome
713+
} else if (typeof(window.webkitRequestAnimationFrame) == 'function') {
714+
window.webkitRequestAnimationFrame(updateVerticalBarChart);
715+
716+
// Firefox
717+
} else if (window.mozRequestAnimationFrame) { // Seems rather slow in FF6 - so disabled
718+
window.mozRequestAnimationFrame(updateVerticalBarChart);
719+
720+
// Default fallback to setTimeout
721+
} else {
722+
setTimeout(updateVerticalBarChart, 16.6666666);
723+
}
724+
}
725+
}
726+
727+
updateVerticalBarChart();
728+
729+
}
730+
731+
732+
603733
this.drawPieChart = function(ring){
604734
var context = this.ctx;
605735
context.lineWidth = this.pieBorderWidth;
@@ -918,8 +1048,8 @@ function AwesomeChart(canvasElementId){
9181048
}
9191049

9201050
}
921-
922-
1051+
1052+
9231053

9241054
this.animatePieChart = function(pieType){
9251055
var dataSum = 0,

‎demo-animated.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@
172172
chart1.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
173173
chart1.randomColors = true;
174174
chart1.animate = true;
175-
chart1.animationFrames = 20;
175+
chart1.animationFrames = 30;
176176
chart1.draw();
177177

178178
var chart2 = new AwesomeChart('chartCanvas2');
@@ -182,7 +182,7 @@
182182
chart2.barFillStyle = chart1.colors[0];
183183
chart2.labelFillStyle = chart1.colors[0];
184184
chart2.animate = true;
185-
chart2.animationFrames = 20;
185+
chart2.animationFrames = 30;
186186
chart2.draw();
187187

188188
var chart3 = new AwesomeChart('chartCanvas3');
@@ -280,6 +280,8 @@
280280
chart11.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
281281
chart11.colors = chart1.colors;
282282
chart11.randomColors = true;
283+
chart11.animate = true;
284+
chart11.animationFrames = 30;
283285
chart11.draw();
284286

285287
var chart12 = new AwesomeChart('chartCanvas12');
@@ -289,6 +291,8 @@
289291
chart12.labels = ['IE 8','IE 7','IE 6'];
290292
chart12.barFillStyle = chart1.colors[0];
291293
chart12.labelFillStyle = chart1.colors[0];
294+
chart12.animate = true;
295+
chart12.animationFrames = 30;
292296
chart12.draw();
293297

294298
var chart13 = new AwesomeChart('chartCanvas13');

0 commit comments

Comments
 (0)