Drawing apexchart timeline chart with dynamic series of data

Question

hi guys i am trying apexchart.js librry to draw a timeline chart. i want a multiple series depending on tasks i have in sprint in bubble.io in which i want to give name and data parameter dynamically.

following is my code

   <div id='chart' style='height: 70vh;'></div>
<script> 
var task=[Parent group's Sprint's tasks:each item's Name:formatted as JSON-safe];   
var names=[Parent group's Sprint's tasks:each item's developer:unique elements's Fname:formatted as JSON-safe];    
var  _startDates=[Parent group's Sprint's tasks:each item's Start-date:extract UNIX];
var _endDates=[Parent group's Sprint's tasks:each item's End-date:extract UNIX];

var startDates=[];
var endDates=[];
for(var i=0;i<task.length;i++){

    startDates.push(new Date(_startDates[i]));
    endDates.push(new Date(_endDates[i]));
}


  console.log(names);

    function getResult(){
        var result=[];
        var _data=[];
        for (var j=0;j<task.lenght;j++){
        _data.push({x:task[i],y:[startDates[i].getTime(),                                   endDates[i].getTime()], fillColor: "#008FFB"})
        }
        for(var i=0;i<names.length;i++){
            result.push({name:names[i],data: _data[i]});
                }    
        return result;
              }
    

      var options = {
        series:[ 
            
            getResult()
               
          ],
          chart: {
          height: 450,
          type: 'rangeBar'
        },
        plotOptions: {
          bar: {
            horizontal: true
          }
        }, xaxis: {
          type: 'datetime'
        }

        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);

        chart.render();

</script>

but it is giving me an error saying

It is a possibility that you may have not included 'data' property in series.

i would appreciate if anyone can suggest me where i am making mistake

thanks

Answer 1

I've gone through the same problem with a personal project I've been working on.

I know it is something related to ApexChart and its asynchronous feature, but I couldn't figure it out yet.

My problem only appears when I refresh the page or navigate through the web app I'm building. When I log the steps in my project it works fine.

Cheers!