3D Pie Chart
Jamie Johnson
Thanks to amCharts, one can easily set up a 3D pie chart (or other charts). The charts are JavaScript-based. Here's how to set one up:
- Download: You need the JavaScript Charts library, which you can download at https://www.amcharts.com/download/. I used a localized version I downloaded though I tested successfully using the external script calls below.
- Add the library scripts and CSS in your markup:
<script src="//www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script> <script src="//www.amcharts.com/lib/3/pie.js" type="text/javascript"></script> <script src="//www.amcharts.com/lib/3/plugins/export/export.min.js" type="text/javascript"></script> <link href="//www.amcharts.com/lib/3/plugins/export/export.css" media="all" rel="stylesheet" type="text/css" /> <script src="//www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script> - Add the call to the library, which constructs the chart:
<script> var chart = AmCharts.makeChart( "chartdiv", { "type": "pie", "theme": "light", "dataProvider": [ { "item": "Resembles Pac-Man", "value": 75 }, { "item": "Does not resember Pac-Man", "value": 25 } ], "valueField": "value", "titleField": "item", "outlineAlpha": 0.4, "depth3D": 15, "balloonText": "[[title]]<br /><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>", "angle": 30, "export": { "enabled": true } } ); </script> - Customize CSS if you want (I disabled the chart from showing at a width 640px and below):
<style> #chartdiv { width: 100%; height: 500px; display:block; } @media all and (max-width:640px){ #chartdiv { display:none;} } </style> - Add the markup:
<div id="chartdiv"></div>
And here it is in action:
Now, let's make it a bit more interactive. I will have up to 10 categories and 10 numeric values you can add and upon clicking "Show Chart," you will see a customized chart above. Note that you do not have to use all 10, but you do have to use ONLY a number in the value field (Don't worry! I wrote validation for that and will show you how).
|
Category 1 Title: |
Value for Category 1: |
|
Category 2 Title: |
Value for Category 2: |
|
Category 3 Title: |
Value for Category 3: |
|
Category 4 Title: |
Value for Category 4: |
|
Category 5 Title: |
Value for Category 5: |
|
Category 6 Title: |
Value for Category 6: |
|
Category 7 Title: |
Value for Category 7: |
|
Category 8 Title: |
Value for Category 8: |
|
Category 9 Title: |
Value for Category 9: |
|
Category 10 Title: |
Value for Category 10: |
And here's my code I used to accomplish the interactive chart:
<script>
/* Script by Jamie Johnson @jamesarthurjohn using and extending 3D Pie Charts AMCHARTS.com */
function mychart(){
title1 = document.getElementById('cat1').value;
val1 = document.getElementById('cat1val').value * 1;
title2 = document.getElementById('cat2').value;
val2 = document.getElementById('cat2val').value * 1;
title3 = document.getElementById('cat3').value;
val3 = document.getElementById('cat3val').value * 1;
title4 = document.getElementById('cat4').value;
val4 = document.getElementById('cat4val').value * 1;
title5 = document.getElementById('cat5').value;
val5 = document.getElementById('cat5val').value * 1;
title6 = document.getElementById('cat6').value;
val6 = document.getElementById('cat6val').value * 1;
title7 = document.getElementById('cat7').value;
val7 = document.getElementById('cat7val').value * 1;
title8 = document.getElementById('cat8').value;
val8 = document.getElementById('cat8val').value * 1;
title9 = document.getElementById('cat9').value;
val9 = document.getElementById('cat9val').value * 1;
title10 = document.getElementById('cat10').value;
val10 = document.getElementById('cat10val').value * 1;
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"item": title1,
"value": val1
}, {
"item": title2,
"value": val2
}, {
"item": title3,
"value": val3
}, {
"item": title4,
"value": val4
}, {
"item": title5,
"value": val5
}, {
"item": title6,
"value": val6
}, {
"item": title7,
"value": val7
}, {
"item": title8,
"value": val8
}, {
"item": title9,
"value": val9
}, {
"item": title10,
"value": val10
} ],
"valueField": "value",
"titleField": "item",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br /><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true
}
} );
}
function checkval(n){
if(isNaN(n.value)){alert('Please put a valid number');n.value='';n.focus(); }
}
</script>
<table celpadding="3" border="1" cellspacing="3">
<tr><td>
Category 1 Title:<br /><input type="text" id="cat1" value="" />
</td><td>
Value for Category 1:<br /><input type="text" id="cat1val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 2 Title:<br /><input type="text" id="cat2" value="" />
</td><td>
Value for Category 2:<br /><input type="text" id="cat2val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 3 Title:<br /><input type="text" id="cat3" value="" />
</td><td>
Value for Category 3:<br /><input type="text" id="cat3val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 4 Title:<br /><input type="text" id="cat4" value="" />
</td><td>
Value for Category 4:<br /><input type="text" id="cat4val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 5 Title:<br /><input type="text" id="cat5" value="" />
</td><td>
Value for Category 5:<br /><input type="text" id="cat5val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 6 Title:<br /><input type="text" id="cat6" value="" />
</td><td>
Value for Category 6:<br /><input type="text" id="cat6val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 7 Title:<br /><input type="text" id="cat7" value="" />
</td><td>
Value for Category 7:<br /><input type="text" id="cat7val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 8 Title:<br /><input type="text" id="cat8" value="" />
</td><td>
Value for Category 8:<br /><input type="text" id="cat8val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 9 Title:<br /><input type="text" id="cat9" value="" />
</td><td>
Value for Category 9:<br /><input type="text" id="cat9val" value="" onblur="checkval(this);" />
</td></tr>
<tr><td>
Category 10 Title:<br /><input type="text" id="cat10" value="" />
</td><td>
Value for Category 10:<br /><input type="text" id="cat10val" value="" onblur="checkval(this);" />
</td></tr>
</table>
<input type="button" onclick="mychart()" value="Show Chart" />
One more cool thing: You can download the chart in different formats (PDF, images, etc.)!