Display all index positions available in an array in another variable?

I want to access all indexes from an array to show each one of them in a different variable to generate an AmChart graph

let fieldsArrays = [[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }],
    [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }],
    [{ timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }],
    ];

I tried a for loop but I'm not sure if it's the proper way:

for (var i = 0; i < fieldsArrays.length; i++) {
    var innerArrayLength = fieldsArrays[i].length;
    for (var j = 0; j < innerArrayLength; j++) {
        console.log(fieldsArrays[i][j]);
    }
}

// This displays only one line in the graph. Each index should have it's own line in the AmChart graph
chart.data = fieldsArrays[0];

Solution

You have already noticed that you can't simply assign your fieldArrays variable directly to chart.data and get multiple lines appearing from it. AmCharts only supports a flattened array of objects, not an array of arrays (note that every single one of our basic demos is a flattened array). AmCharts can't infer multiple lines from an array of arrays so you need to create series objects for each line you intend to display from your data set and tell those series objects how to interpret the data in your flattened array.

There are two approaches you can take to display multiple lines from your data.

1) Using chart.data, you have to flatten/combine and remap your array of arrays such that the values from your sub arrays correspond to their own individual value field property properties for each series (line). Given:

[
  [{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }, { timeAxe: "2019-1-27 0:45:18",  fieldArrays: 10 }],
  [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 150 }],
  [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 2100 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }]
];

This needs to become something like this:

chart.data = [
  {
    timeAxe: "2019-1-27 0:44:47",
    fieldsArrays: 1
  },
  {
    timeAxe: "2019-1-27 0:45:18",
    fieldArrays: 10,
    fieldsArrays2: 200,
    fieldsArrays3: 2100
  },
  {
    timeAxe: "2019-1-27 0:47:19",
    fieldsArrays2: 150,
    fieldsArrays3: 2500
  }
];

Each series object will have valueY (or valueX) correspond to the fieldArrays property associated with it:

  var series = chart.series.push(new am4charts.LineSeries());
  // ...
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  // ...
  var series2 = chart.series.push(new am4charts.LineSeries());
  // ...
  series2.dataFields.valueY = "fieldArrays2";
  series2.dataFields.dateX = "timeAxe";
  // ...
  // repeat for each unique valuefield property

2) If you prefer to keep the array of arrays, then you can assign each array directly into each series' own data array and keep your the same value field across all of your series. For example:


fieldArrays.forEach(function(fieldArray, index) {

  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "Series " + (index + 1);
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  series.data = fieldArray; //assign array[0] to its own line, array[1] to its own line, etc  

  var bullet = series.bullets.push(new am4charts.CircleBullet());
});

Basic demo below:

var fieldArrays = [
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 13
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 14
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 11
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 10
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 10
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 15
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 12
  }
 ],
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 29
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 25
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 25
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 22
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 23
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 24
  }
 ],
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 31
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 45
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 35
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 36
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 43
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 32
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 35
  }
 ]
]


// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;


var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

fieldArrays.forEach(function(fieldArray, index) {

  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "Series " + (index + 1);
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  series.data = fieldArray;
  
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
});


// Legend
chart.legend = new am4charts.Legend();

#chartdiv {
  width: 100%;
  height: 500px;
}

<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 id="chartdiv"></div>