amCharts - amcharts.com

Here is some code snippets that I use again and again to get amCharts working and printing nicely.

JS to be added to <head>

  • https://cent.blob.core.windows.net/assets/exhibitions/global/amcharts/amcharts.js
  • https://cent.blob.core.windows.net/assets/exhibitions/global/amcharts/serial.js
  • ONLY for pie and donut charts: https://cent.blob.core.windows.net/assets/exhibitions/global/amcharts/pie.js
  • https://cent.blob.core.windows.net/assets/exhibitions/global/amcharts/plugins/responsive/responsive.min.js

Add this code to where you would like the graph to appear

<div id="chartdiv" style="width: 95%;" ></div>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {});
</script>

REMEMBER to add a height value to the graph
I usually add this in CSS so that I can manipulate the height for mobile, tablet and desktop; however it can also be set above in the <div> styles.

Then replace the {} with your code from amCharts

You find the amChart code under the "Code" tab in the amCharts live editor.
NOTE: There should only be ONE set of { } surrounding the code.

Add the responsive code to the array

amCharts Responsive Tutorial: http://www.amcharts.com/tutorials/making-charts-responsive/
Below are some examples:

Default Responsive Code

"responsive": {
        "enabled": true,
        "addDefaultRules": true
}

Columns Responsive Code

"responsive": {
    "enabled": true,
    "addDefaultRules": true,
    "rules": [{
        "minWidth": 0,
        "maxWidth": 900,
        "overrides": {
            "categoryAxis": {
                "labelsEnabled": false
            }
        }
    }]
},

Pie Responsive Code

"responsive": {
    "enabled": true,
    "addDefaultRules": true,
    "rules": [{
        "minWidth": 0,
        "maxWidth": 537,
        "overrides": {
            "labelText": "[[value]]%",
            "innerRadius": "40%",
            "labelsEnabled": true
        }
    },{
        "minWidth":0,
        "maxWidth":800,
        "overrides": {
            "pullOutRadius": "5%",
            "legend": {
            "position": "bottom",
            "enabled":false
        }
        }
    }]
},

To ensure the graphs print nicely, add the following script

<script>
if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
        chart.validateNow();
    });
} else {
    // IE and Firefox fire before/after events
    window.onbeforeprint = function () {
        chart.validateNow();
    }
}
</script>