AmCharts test

by jhartnoll

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<link rel="stylesheet" href="https://cdn.thinkka.com/thinkka/css/bootstrap/bootstrap.thinkka.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div class="container-fluid d-flex flex-wrap">
  <button class="btn btn-warning m-2" id="am3">
    Amcharts 3
  </button>
  <button class="btn btn-info m-2" id="am4">
    Amcharts 4
  </button>
</div>

<div class="container-fluid d-flex flex-wrap">

  <div id="shippingReceipts2" class="h20e col-6 ">

  </div>

  <div id="shippingReceipts" class="h20e col-6 border-dark border-right">

  </div>

</div>

JavaScript

$.ajax({
   type: "GET",
   url: "https://sam4.thinkka.com/testdata/shipping.json",
   complete: function(data) {
     am4core.options.onlyShowOnViewport = true;
     var groupedResults = data.responseJSON.reduce(function(result, current) {
       result[current.location] = result[current.location] || [];
       result[current.location].push(current);
       return result;
     }, {});

     $("#am4").on("click", function() {
       showchart(groupedResults, $("#shippingReceipts"));
     })
     $("#am3").on("click", function() {
       showchart2(groupedResults, $("#shippingReceipts2"));
     })

   }
 });

 function showchart(data, container) {
 am4core.options.deferredDelay = 1;  
am4core.options.minPolylineStep =1;
   am4core.options.queue = false;
   var start = performance.now();
   for (const name in data) {
     let group = data[name];
     console.log("start looped item", performance.now() - start);
     // make dates into unix milliseconds (would be better if this was provided from the API)
     group.forEach(element => element.saledate = parseInt(element.saledate) * 1000);
     $("<div/>").attr("id", "chart_" + name).addClass("h-6e").appendTo(container);
     console.log("start build config", performance.now() - start);
     // Create chart instance

     am4core.createDeferred(function(div) {
       // Create first chart
       let chart = am4core.createFromConfig({
         data: group,
         //dateFormatter: { inputDateFormat : "x" }, // 24/02/2020 07:57:20
         xAxes: [{
           type: "DateAxis",
           dataFields: {
             category: "saledate"
           },
           baseInterval: {
             timeUnit: "month",
             count: 1
           },
           title: {
             text: name,
             rotation: 0,
             align: "center",
             valign: "bottom",
             dy: 5,
             fontWeight: 600,
             fontSize: 10
           },
           renderer: {
             minGridDistance: 5,
    ...