I am creating a pie chart using d3 to load a pie chart -
var pie = new d3pie(
// pie control Json
);
This is working great however I am looking to do logic after the pie has fully rendered.
I have tried to use the when done logic (like when doing an ajax call) like so -
$.when(pie).done(function () {
// further logic to be completed after pie has loaded
});
However this does not work in that it just steps into the when clause even tho the pie has not loaded fully. How can I do this?
You are looking for the onload callback:
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
Full code sample:
<html>
<head></head>
<body>
<div id="pieChart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "Lots of Programming Languages",
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"text": "A full pie chart to show off label collision detection and resolution.",
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [
{
"label": "JavaScript",
"value": 264131,
"color": "#2484c1"
},
{
"label": "Ruby",
"value": 218812,
"color": "#0c6197"
},
{
"label": "Java",
"value": 157618,
"color": "#4daa4b"
},
{
"label": "PHP",
"value": 114384,
"color": "#90c469"
},
{
"label": "Python",
"value": 95002,
"color": "#daca61"
},
{
"label": "C+",
"value": 78327,
"color": "#e4a14b"
},
{
"label": "C",
"value": 67706,
"color": "#e98125"
},
{
"label": "Objective-C",
"value": 36344,
"color": "#cb2121"
},
{
"label": "Shell",
"value": 28561,
"color": "#830909"
},
{
"label": "Cobol",
"value": 24131,
"color": "#923e99"
},
{
"label": "C#",
"value": 100,
"color": "#ae83d5"
},
{
"label": "Coldfusion",
"value": 68,
"color": "#bf273e"
},
{
"label": "Fortran",
"value": 218812,
"color": "#ce2aeb"
},
{
"label": "Coffeescript",
"value": 157618,
"color": "#bca44a"
},
{
"label": "Node",
"value": 114384,
"color": "#618d1b"
},
{
"label": "Basic",
"value": 95002,
"color": "#1ee67b"
},
{
"label": "Cola",
"value": 36344,
"color": "#b0ec44"
},
{
"label": "Perl",
"value": 32170,
"color": "#a4a0c9"
},
{
"label": "Dart",
"value": 28561,
"color": "#322849"
},
{
"label": "Go",
"value": 264131,
"color": "#86f71a"
},
{
"label": "Groovy",
"value": 218812,
"color": "#d1c87f"
},
{
"label": "Processing",
"value": 157618,
"color": "#7d9058"
},
{
"label": "Smalltalk",
"value": 114384,
"color": "#44b9b0"
},
{
"label": "Scala",
"value": 95002,
"color": "#7c37c0"
},
{
"label": "Visual Basic",
"value": 78327,
"color": "#cc9fb1"
},
{
"label": "Scheme",
"value": 67706,
"color": "#e65414"
},
{
"label": "Rust",
"value": 36344,
"color": "#8b6834"
},
{
"label": "FoxPro",
"value": 32170,
"color": "#248838"
}
]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
},
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
});
</script>
</body>
</html>