dynamically adding series to highcharts

Question

I'm relative new to highcharts so I'm not that knowledgeable. But what I am trying to do is that I am trying to dynamically create series with a name and some x, y values. To get the x and y values I use two dictionaries looking like this:

The X values. They are dates
The Y values. They are seconds What I want to do is create a series that have the names of the keys and then they can have multiple points for x, y values.

So for example at "Fiber_Mätning" I have two values in the key in both dictionaries. What I want to do is that I create a series with the name "Fiber_Mätning", and then it should have two points where I give both x and y value.

So the 1st point in "Fiber_Mätning" would be x:"2020-10-28" y:"28800" and the 2nd point in "Fiber_Mätning" would be x:"2020-10-29" y:"18000"

After that I would move on onto the next key in both dictionaries and do the same. So the way I create the series need to be a function that is dynamically creating series and the points depending on the amount of keys and values in the dictionaries.

Currently my highchart code looks like this:

$('#container').highcharts({
                                chart:{
                                    type: 'column',
                                    events:{
                                            load: function(){
                                                    RedrawColumns(this)
                                            },
                                            redraw: function(){
                                                    RedrawColumns(this)
                                            }
                                    }
                                },
                                title:{
                                    text: 'Time worked by {{user_to_show}}'
                                },
                                subtitle:{
                                    text:'{{user_to_show}}´s flex time: '
                                },
                                tooltip:{
                                        formatter: function (){
                                            var text = 'Date: ' + this.x + '<br>' + 'Time: ' + secondsTimeSpanToHMS(this.y/1000) +
                                            '<br>' +'Extra info:' + {{extra_info|safe}}[this.x];
                                            return text;
                                        }
                                },
                                xAxis:
                                {
                                    categories: {{all_dates|safe}}
                                },
                                yAxis:
                                [{
                                    title:
                                    {
                                        text: '' //If it isnt given '' it will display "value" so using '' to hide it
                                    },
                                    gridLineWidth: 1,
                                    type: 'datetime', //y-axis will be in milliseconds
                                    dateTimeLabelFormats:
                                    { //force all formats to be hour:minute:second
                                            second: '%H:%M:%S',
                                            minute: '%H:%M:%S',
                                            hour: '%H:%M:%S',
                                            day: '%H:%M:%S',
                                            week: '%H:%M:%S',
                                            month: '%H:%M:%S',
                                            year: '%H:%M:%S'
                                    },
                                    opposite: true
                                }],

                                plotOptions:
                                {
                                    series:
                                    {
                                        dataLabels:
                                        {
                                            enabled: true,
                                            formatter: function()
                                            {
                                                if( this.series.index == 0 )
                                                {
                                                    return secondsTimeSpanToHMS(this.y/1000) ;
                                                }
                                                else
                                                {
                                                    return this.y;
                                                }

                                            }
                                        }
                                    }
                                },
                                series:
                                [{

                                }]
                            });
                        });

(I am doing this with django, html and js) If anything is unclear please say so and I will try to explain it in further detail. Thanks in advance for any replies.

Answer 1

Here is my proposal for the solution. I think that everything is explained in the comments. If something is unclear, feel free to ask.

let data1 = {
  Jarnvag_asdasd: ['2020-10-22'],
  Fiber_Matning: ['2020-10-28', '2020-10-29'],
  Fiber_Forarbete: ['2020-10-28', '2020-10-29'],
};

let data2 = {
  Jarnvag_asdasd: [28800],
  Fiber_Matning: [28800, 18000],
  Fiber_Forarbete: [28800, 14400],
};

// The constructor to create the series structure
function CreateSeries(name, data) {
  this.name = name;
  this.data = data;
}

// series array
let series = [];

// Iterate through the data to concat them
for (let i in data1) {
  let data = [];

  data1[i].forEach((d, j) => {
    data.push([d, data2[i][j]])
  })

  series.push(new CreateSeries(i, data))
}

Highcharts.chart('container', {

  series: series
});

Demo: https://jsfiddle.net/BlackLabel/r7ame5gw/