Parsing data in Highchart

Question

I'am trying to parse my data Into Highchart. I have already read some articles here about this, but didn't found solution for my issue.

I have HTML table with data from DB. When I am clicking on the rows, they are getting class "clicked", so I have

<td class="clicked"> 

and this rows writes into one array like:

var rows = ["1", "X5CrNi18", "0", "55", "0", "Type1"];

and then I am dividing it on the two arrays like:

var textArr = ["X5CrNi18"]; // I am using rows[1][1] for creating textArr
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]]; // this values are Num 2 and Num3 from the table

Now the question: how can I create different arrays for different "Name" 's?(see table in jsfiddle)

Example: What I've done: Clicked all of four rows in the table.

What I have:

var textArr = ["X5CrNi18"];
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]];

What I want and tried to have:

var textArr1 = ["X5CrNi18"];
var textArr2 = ["EN31"];
var numArr = [[0, 0],[100, 0.5]];
var numArr2 = [[0, 0], [300, 0.85]];

And then I want to build count of series in my chart which equals count of this arrays.

I've copied my code to jsfiddle(sorry for my russian comments, I can translate them If you will need): https://jsfiddle.net/95vdgtx3/3/

Also you can see the problem with arrays filling, when button "BUILD CHART" is pressed more than one time (one - if we will count only displaying of block, without counting hiding) - values appends into arrays, don't know how I can fix it.

Here is updated code, where you can see what I am trying to reach: https://jsfiddle.net/Le28pfhw/ - you don't need to choose rows, just click on the button - data were manually added into the series.

Here is the all table on this moment:

№   Grade t QPa С   Type
1   X5CrNi18    0   55  0   Steel
2   X5CrNi18    100 55  0.5 Steel
3   X5CrNi18    200 55  0.68    Steel
4   X5CrNi18    300 55  0.85    Steel
5   S355J2Q +Z35    0   20  0   Steel
6   S355J2Q +Z35    100 20  0.5 Steel
7   S355J2Q +Z35    200 20  0.68    Steel
8   S355J2Q +Z35    300 20  0.85    Steel
1   42CrMo4 0   55  0   Alloy
2   42CrMo4 100 55  0.5 Alloy
3   42CrMo4 200 55  0.68    Alloy
4   42CrMo4 300 55  0.85    Alloy
5   EN31    0   20  0   Alloy
6   EN31    100 20  0.5 Alloy
7   EN31    200 20  0.68    Alloy
8   EN31    300 20  0.85    Alloy

Table depends on database, as I said. If database will grow, table will grow too.

So, from this table I can get maximum 4 series:

1) For "X5CrNi18"

2) For "S355J2Q +Z35"

3) For "42CrMo4"

4) For "EN31"

In each serie minimum data from two rows with same "Grade".

If I should give more information - write It into the comments, please.

Answer 1

There are many ways to achieve what you are after. Here is one of them:

Instead of parsing two seperate array into new arrays that need to be combined, use objects.

First we create the array that has string values for all array fields:

rowsText = Array.from(
  document.getElementsByClassName('clickedRow'))
    .map(row => Array.from(row.getElementsByTagName('TD'))
      .map(cell => cell.innerHTML)
)

We use this to create an object that has the finished series information:

var finished_series = []

rowsText.forEach((arr) => {
  var existing_id = -1 //we must keep track of this to check if we are adding to a series or creating a new series
  finished_series.forEach((obj, index) => { //search through what we have already built
    if (arr[1] == obj.name) {
      existing_id = index;
      return true;
    }
  });
  if (existing_id == -1) { //if new series
    finished_series.push({
      name: arr[1],
      data: [{
        x: parseInt(arr[2]),
        y: parseFloat(arr[4])
      }]
    })
  } else { //if already existing:
    finished_series[existing_id].data.push({ 
      x: parseInt(arr[2]),
      y: parseFloat(arr[4])
    })
  }
});

This lets you have a finished series definition to use in the chart like this;

Highcharts.chart('container', {
  ...
  series: finished_series
}

The advantage of using objects is that it is easily human readable from raw values (such as in console.log). And that you can add additional information, that can pop up in a tooltip, for example.

A couple of things to note

• The HTML in the fiddle is not properly formatted, the table is missing an > and </table>.
• If you plan to let users change the rows selected, you need to either update the highchart instance, or clear it and rebuild it. As it is now, it breaks when you try to click different rows and build twice, since there is already information there.

Working JSFiddle example: https://jsfiddle.net/ewolden/nxdv2wc8/3/

Working JSFiddle example (which shows material type on hover): https://jsfiddle.net/ewolden/nxdv2wc8/5/