How to make amcharts animate plugin work with RequireJS?

Victor Tsang Source

I am trying to this example for their website and convert it to use requirejs, I am not sure what I am doing wrong.

https://www.amcharts.com/demos/animated-time-line-pie-chart/

I loaded the animate plugin as a dependency and I get an error that animateData is not a function.

This is the codepen I am working with: https://codepen.io/vtsang/pen/OEgdWL

requirejs.config({
  // Define paths; relative from js folder
  paths: {
    "amcharts": "//www.amcharts.com/lib/3/amcharts",
    "amcharts.funnel": "//www.amcharts.com/lib/3/funnel",
    "amcharts.gauge": "//www.amcharts.com/lib/3/gauge",
    "amcharts.pie": "//www.amcharts.com/lib/3/pie",
    "amcharts.radar": "//www.amcharts.com/lib/3/radar",
    "amcharts.serial": "//www.amcharts.com/lib/3/serial",
    "amcharts.xy": "//www.amcharts.com/lib/3/xy",
    "amcharts.plugins.animate":
      "https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"
  },

  // Define dependencies
  shim: {
    "amcharts.funnel": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },

      "amcharts.animate": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.gauge": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.pie": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.radar": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.serial": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.xy": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    }
  }
});

requirejs(['amcharts.pie'],
  function() {
    buildChart();
  }
);

function buildChart() {
 /**
 * Define data for each year
 */
var chartData = {
  "1995": [
    { "sector": "Agriculture", "size": 6.6 },
    { "sector": "Mining and Quarrying", "size": 0.6 },
    { "sector": "Manufacturing", "size": 23.2 },
    { "sector": "Electricity and Water", "size": 2.2 },
    { "sector": "Construction", "size": 4.5 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
    { "sector": "Transport and Communication", "size": 9.3 },
    { "sector": "Finance, real estate and business services", "size": 22.5 } ],
  "1996": [
    { "sector": "Agriculture", "size": 6.4 },
    { "sector": "Mining and Quarrying", "size": 0.5 },
    { "sector": "Manufacturing", "size": 22.4 },
    { "sector": "Electricity and Water", "size": 2 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.8 },
    { "sector": "Transport and Communication", "size": 9.7 },
    { "sector": "Finance, real estate and business services", "size": 22 } ],
  "1997": [
    { "sector": "Agriculture", "size": 6.1 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.9 },
    { "sector": "Electricity and Water", "size": 1.8 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 13.7 },
    { "sector": "Transport and Communication", "size": 9.4 },
    { "sector": "Finance, real estate and business services", "size": 22.1 } ],
  "1998": [
    { "sector": "Agriculture", "size": 6.2 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 21.4 },
    { "sector": "Electricity and Water", "size": 1.9 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.5 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 23 } ],
  "1999": [
    { "sector": "Agriculture", "size": 5.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20 },
    { "sector": "Electricity and Water", "size": 1.8 },
    { "sector": "Construction", "size": 4.4 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.2 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 24.7 } ],
  "2000": [
    { "sector": "Agriculture", "size": 5.1 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 20.4 },
    { "sector": "Electricity and Water", "size": 1.7 },
    { "sector": "Construction", "size": 4 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 24.6 } ],
  "2001": [
    { "sector": "Agriculture", "size": 5.5 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.3 },
    { "sector": "Electricity and Water", "size": 1.6 },
    { "sector": "Construction", "size": 3.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 25.8 } ],
  "2002": [
    { "sector": "Agriculture", "size": 5.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.5 },
    { "sector": "Electricity and Water", "size": 1.6 },
    { "sector": "Construction", "size": 3.6 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.1 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 26 } ],
  "2003": [
    { "sector": "Agriculture", "size": 4.9 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 19.4 },
    { "sector": "Electricity and Water", "size": 1.5 },
    { "sector": "Construction", "size": 3.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.2 },
    { "sector": "Transport and Communication", "size": 11 },
    { "sector": "Finance, real estate and business services", "size": 27.5 } ],
  "2004": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 18.4 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 3.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.9 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 28.1 } ],
  "2005": [
    { "sector": "Agriculture", "size": 4.3 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 18.1 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 3.9 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 29.1 } ],
  "2006": [
    { "sector": "Agriculture", "size": 4 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 16.5 },
    { "sector": "Electricity and Water", "size": 1.3 },
    { "sector": "Construction", "size": 3.7 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.2 },
    { "sector": "Transport and Communication", "size": 12.1 },
    { "sector": "Finance, real estate and business services", "size": 29.1 } ],
  "2007": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 16.2 },
    { "sector": "Electricity and Water", "size": 1.2 },
    { "sector": "Construction", "size": 4.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.6 },
    { "sector": "Transport and Communication", "size": 11.2 },
    { "sector": "Finance, real estate and business services", "size": 30.4 } ],
  "2008": [
    { "sector": "Agriculture", "size": 4.9 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 17.2 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 5.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.4 },
    { "sector": "Transport and Communication", "size": 11.1 },
    { "sector": "Finance, real estate and business services", "size": 28.4 } ],
  "2009": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 16.4 },
    { "sector": "Electricity and Water", "size": 1.9 },
    { "sector": "Construction", "size": 4.9 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.5 },
    { "sector": "Transport and Communication", "size": 10.9 },
    { "sector": "Finance, real estate and business services", "size": 27.9 } ],
  "2010": [
    { "sector": "Agriculture", "size": 4.2 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 16.2 },
    { "sector": "Electricity and Water", "size": 2.2 },
    { "sector": "Construction", "size": 4.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
    { "sector": "Transport and Communication", "size": 10.2 },
    { "sector": "Finance, real estate and business services", "size": 28.8 } ],
  "2011": [
    { "sector": "Agriculture", "size": 4.1 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.3 },
    { "sector": "Construction", "size": 5 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 17.3 },
    { "sector": "Transport and Communication", "size": 10.2 },
    { "sector": "Finance, real estate and business services", "size": 27.2 } ],
  "2012": [
    { "sector": "Agriculture", "size": 3.8 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.6 },
    { "sector": "Construction", "size": 5.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.8 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 28 } ],
  "2013": [
    { "sector": "Agriculture", "size": 3.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.7 },
    { "sector": "Construction", "size": 5.7 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.5 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 26.6 } ],
  "2014": [
    { "sector": "Agriculture", "size": 3.9 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 14.5 },
    { "sector": "Electricity and Water", "size": 2.7 },
    { "sector": "Construction", "size": 5.6 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.6 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 26.5 } ]
};


/**
 * Create the chart
 */
var currentYear = 1995;
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "size",
  "titleField": "sector",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "marginTop": 30,
  "titles": [{
    "text": "South African Economy"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#555"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Year",
    "color": "#555"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

      function getCurrentData() {
        var data = chartData[currentYear];
        currentYear++;
        if (currentYear > 2014)
          currentYear = 1995;
        return data;
      }

      function loop() {
        chart.allLabels[0].text = currentYear;
        var data = getCurrentData();
        chart.animateData( data, {
          duration: 1000,
          complete: function() {
            setTimeout( loop, 3000 );
          }
        } );
      }

      loop();
    }
  } ],
   "export": {
   "enabled": true
  }
} );

}
javascriptrequirejsamcharts

Answers

answered 1 week ago xorspark #1

Your config has a few errors.

Your paths definition for the animate plugin needs to point to the file without the .js extension:

  paths: {
    // ...
    "amcharts.plugins.animate":
      "https://www.amcharts.com/lib/3/plugins/animate/animate.min"
  },

Your shim needs to use the same reference as the path. You're using amcharts.animate when your path is set up as amcharts.plugin.animate. They need to match:

"amcharts.plugins.animate": {
  deps: ["amcharts"],
  exports: "AmCharts",
  init: function() {
    AmCharts.isReady = true;
  }
},

Lastly, you need to actually include the plugin in your requirejs call:

requirejs(['amcharts.pie', 'amcharts.plugins.animate'],
  function() {
    buildChart();
  }
);

Updated codepen

comments powered by Disqus