Chart.js pie animation, play once, when at a specific position on the page through vertical scrolling
I have a simple pie chart that animates when loaded out of the box from chart.js. I am trying to allow animations to alternate through a specific scroll point on a long vertical web page - idea for below code to execute, only once when new users scroll or remove the position of the page - the animation will que once and that's it. This is causing a ton of problems - since I was able to execute and show / hide elements in the page position using breakpoints and scrolling the window, but this animation won't work with that, not every way I try to do it; what happens is the animation is updated and played every time the browser scrollbar is adjusted in the slightest way. It just refreshes, scrolls> refreshes animation> scrolls> refreshes animations.Any pointers there; The Chart.js docs are not very helpful with this as either most demos have onDomready. I found ways to execute jQuery with breakpoints, as you can see in the code below, but the actual animation is simply ignored and triggered on every scroll setting.
Also here is the main external chart.js file which works below.
Chart.JS external JS
var breakpoint = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 1300 && !breakpoint ) {
// do stuff
// $(window).scroll(function() {
// if ($(this).scrollTop() > 1100) {
// $(function () {
// $(document).ready(function () {
var chart = null;
var colors = Highcharts.getOptions().colors,
categories = ['Shop', 'Buy', 'Own'],
name = 'Browser brands',
data = [{
// y: 55.11,
// color: colors[0],
// drilldown: {
// name: 'MSIE versions',
// categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
// data: [10.85, 7.35, 33.06, 2.81],
// color: colors[0]
// }
// }, {
y: 3,
color: colors[8],
drilldown: {
name: 'Buy',
// categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [10.20, 10.83, 11.58, 13.12, 5.43],
color: colors[8]
}
}, {
y: 7,
color: colors[8],
drilldown: {
name: 'Own',
// categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
// 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[8]
}
}, {
y: 10,
color: colors[8],
drilldown: {
name: 'Own',
// categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
// 'Safari 3.1', 'Safari 4.1'],
data: [4.55, 5.42, 6.23, 0.21, 0.20, 0.19, 0.14],
color: colors[8],
}
// }, {
// y: 2.14,
// color: colors[8],
// drilldown: {
// name: 'Home',
// // categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
// data: [20.1, 0.37, 1.65],
// color: colors[8]
// }
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: null
},
series: [{
name: '',
data: browserData,
innerSize: '20%'
}],
tooltip: {
valueSuffix: '%',
positioner: function () {
return {
x: this.chart.series[0].center[0] - (this.label.width / 2) + 8,
y: this.chart.series[0].center[1] - (this.label.height / 2) + 8
};
}
},
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
connectorColor: 'white'
},
point: {
events: {
mouseOver: function () {
if (!this.connector.dynamicConnector) {
var width = 16,
height = 24;
// Extract the connector start position
var dArr = this.connector.d.split(' ');
var startY = dArr.pop(),
startX = dArr.pop();
var start = [parseFloat(startX), parseFloat(startY)];
// Construct the triangle
var path = 'M ' + start[0] + ' ' + start[1] + 'L ' + (start[0] + height) + ' ' + (start[1] - (width / 2)) + ' L ' + (start[0] + height) + ' ' + (start[1] + (width / 2)) + ' L ' + start[0] + ' ' + start[1];
// Convert the section angle from radian to degree and apply to the trangle
// Setup rotation, x, y required by the updateTransform method
this.connector.rotation = (this.angle * 180) / Math.PI;
this.connector.x = startX;
this.connector.y = startY;
this.connector.updateTransform();
this.connector.attr('stroke', this.color);
this.connector.attr('fill', Highcharts.Color(this.color).brighten(0.2).get());
this.connector.attr('d', path);
this.connector.dynamicConnector = true;
}
this.connector.show();
},
mouseOut: function () {
this.connector.hide();
}
}
}
}
}
});
}
});
source to share
If anyone is interested, I have achieved my goal with this plugin. Appear.js
<script src="http://rawgit.com/morr/jquery.appear/master/jquery.appear.js"></script>
__
/**
* Highcharts plugin to defer initial series animation until the element has appeared. Requieres
* jQuery.appear.
*/
(function (H) {
function deferAnimate (proceed, init) {
var series = this,
$renderTo = $(this.chart.container.parentNode);
// Prevent pre-rendering without animation
if (init) {
series.group.hide();
}
// Prepare for animation
if (init) {
$renderTo.appear(); // initialize appear plugin
proceed.call(this, init);
// It is appeared, run animation
} else if ($renderTo.is(':appeared')) {
proceed.call(series);
series.group.show();
// It is not appeared, halt animation until appear
} else {
$renderTo.on('appear', function () {
if (!series.animated) {
proceed.call(series);
series.group.show();
series.animated = true;
}
});
}
};
H.wrap(H.Series.prototype, 'animate', deferAnimate);
H.wrap(H.seriesTypes.column.prototype, 'animate', deferAnimate);
H.wrap(H.seriesTypes.pie.prototype, 'animate', deferAnimate);
}(Highcharts));
source to share