#43402

Re-use data processing on updating chart

by notacouch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class='chart' id="chart-1"></div>
<button type="button" id="update-chart-button">
Update Chart</button>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.chart {
  width: 100%;
  height: 500px;
}

JavaScript

/*******************************data structure exemple (externally loaded)************************************/

var preProcessedDataExample = [ {
  "label": "dummyLabel1",
  data: [
    {
    	"cat": "dummyCat1",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat5",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat6",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
  ]
}, {
  "label": "dummyLabel2",
  data: [
    {
    	"cat": "dummyCat0",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat5",
      value: 2.5,
      test: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat4",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
  ]
}, {
  "label": "dummyLabel3",
  data: [
    {
    	"cat": "dummyCat1",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat3",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat5",
      value: 2.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
  ]
}];

var updatedDataExample = [ {
  "label": "dummyLabel1",
  data: [
    {
    	"cat": "dummyCat1",
      value: 3.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat5",
      value: 4.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat6",
      value: 5.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
  ]
}, {
  "label": "dummyLabel2",
  data: [
    {
    	"cat": "dummyCat0",
      value: 6.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat5",
      value: 7.5,
      test: 10,
      test2: 10,
      test3: 10
    },
    {
    	"cat": "dummyCat4",
      value: 8.5,
      test1: 10,
      test2: 10,
      test3: 10
    },
  ]
}, {
 ...