How to display months in an animated amcharts pie chart?

Question

I'm animating an amchart timeline pie chart and am currently trying to get it to display months and days instead of just days, as i have a lot of data and "day 132" isn't the best way to illustrate it.

Is there an easy way to do so with amcharts itself or maybe just js? I tried with a list of " If currentDay>=32 && currentDay<60 " type arguments to define months but that didn't work and even if it had, I'm sure it's not the most efficient way to do so. Unfortunately, the preview here won't work because I have way too much code/data for this chart to put here so I'll link a jsfiddle.

https://jsfiddle.net/ca18nzk1/

Thanks ! : )

 <!-- Resources --> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/pie.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <script> var chartData = { "1": [ { "sector": "Subnautica", "size":0 }, { "sector": "DD", "size":0 }, { "sector": "KCD", "size":0 }, { "sector": "ITB", "size":0 }, { "sector": "Hacktag", "size":0 }, { "sector": "FFXV", "size":0 }, { "sector": "Simulacra", "size":0 }, { "sector": "FC5", "size":0 }, { "sector": "TAB", "size":0 }, { "sector": "Rockband", "size":0 }, { "sector": "Spy Party", "size":0 }, { "sector": "Dota 2", "size":0 }, { "sector": "Frostpunk", "size":0 }, { "sector": "MHW", "size":0 }, { "sector": "Darkwood", "size":2.27 }, { "sector": "PoE 2", "size":0 } ], // (...) more data, 130 entries actually ^^ "132": [ { "sector": "Subnautica", "size":42.55 }, { "sector": "DD", "size":41.22 }, { "sector": "KCD", "size":10.55 }, { "sector": "ITB", "size":10.43 }, { "sector": "Hacktag", "size":2.15 }, { "sector": "FFXV", "size":28.64 }, { "sector": "Simulacra", "size":6.18 }, { "sector": "FC5", "size":10.18 }, { "sector": "TAB", "size":24.22 }, { "sector": "Rockband", "size":4.62 }, { "sector": "Spy Party", "size":3.32 }, { "sector": "Dota 2", "size":7.95 }, { "sector": "Frostpunk", "size":17.42 }, { "sector": "MHW", "size":6.15 }, { "sector": "Darkwood", "size":13.51 }, { "sector": "PoE 2", "size":17.42 } ] }; /** * Create the chart */ var currentYear = 1; var chart = AmCharts.makeChart( "chartdiv6", { "type": "pie", "theme": "dark", "dataProvider": [], "valueField": "size", "titleField": "sector", "startDuration": 0, "innerRadius": 80, "pullOutRadius": 20, "outlineColor": "#FDB515", "marginTop": 30, "titles": [{ "text": "Odd's stream games" }], "allLabels": [{ "y": "54%", "align": "center", "size": 25, "bold": true, "text": "1995", "color": "#bb0a0c" }, { "y": "49%", "align": "center", "size": 15, "text": "Day", "color": "#bb0a0c" }], "listeners": [ { "event": "init", "method": function( e ) { var chart = e.chart; function getCurrentData() { var data = chartData[currentYear]; currentYear++; if (currentYear > 132) currentYear = 132; return data; } function loop() { chart.allLabels[0].text = currentYear; var data = getCurrentData(); chart.animateData( data, { duration: 350, complete: function() { setTimeout( loop, 650 ); } } ); } loop(); } } ], "export": { "enabled": false } } ); </script> <div id="chartdiv6" style="width: 40%; height: 500px; background-color: #1a1a1a;" ></div> 

Answer 1

AmCharts doesn't have a built-in solution for this case, especially in a pie chart, so you have to come up with something on your own. Depending on your needs/accuracy, you could just divide/mod the current day into months/days instead of doing a list of ifs like you proposed, or you can use something like MomentJS to turn your day of year value into an actual date to get the month and date, for example:

  function loop() {
    formatText(chart, currentYear); //consider renaming the currentYear variable since it refers to days.
    // ... omitted ...
  }

  function formatText(chart, day) {
    var date = moment(day, "DDD");//turn day of year into a date
    chart.allLabels[1].text = date.format("MMMM"); //get the full month name and set it to the top label
    chart.allLabels[0].text = date.format("Do"); //get date with ordinal and set it to the bottom
  }

Updated fiddle