Add series / data to highchart gantt from function

Question

My series are like this:

series: [{
                    name: 'Test',
                    data: [{
                        start: Date.UTC(2017, 10, 18, 8, 20), 
                        end: Date.UTC(2017, 10, 18, 11, 30),
                        name: 'One', 
                        assignee: 'Username', 
                        y: 0 
                    },
                    {
                        start: Date.UTC(2017, 10, 18, 14, 20),
                        end: Date.UTC(2017, 10, 18, 16, 0),
                        name: 'Start prototype',
                        assignee: 'Username 2',
                        y: 0
                    }]
                }],

And i was thinking on something along these lines to add an additional event into the gantt chart:

  var chart = $('#container').Highcharts;
                newData = {

                    start: Date.UTC(2017, 10, 19, 18, 20), 
                    end: Date.UTC(2017, 10, 19, 19, 30), 
                    name: 'Nome cliente, Paese', 
                    assignee: 'Username 3', 
                    y: 1 
                }

                chart.addSeries({
                    name: 'New',
                    data:newData
                });

What's the proper way to insert a new data/series from a function?

score 1 · Accepted Answer · answered Nov 26 '19 at 11:52

1

I prepared a demo which should help you to implement data adding functionality to your project.

chart.addSeries({
    data: [{
      start: today + day * Math.floor(Math.random() + i),
      end: today + day * Math.floor(Math.random() + i * 2),
      name: 'test' + i,
    }]
});

Demo: https://jsfiddle.net/BlackLabel/ue2xg6o7/1/

API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Let me know if you have any further questions.

answered Nov 26 '19 at 11:52

Sebastian Wędzel

11,417
1
6
16

Thank you very much for tne answer!, what about adding just data (no series) to an existing serie ? – Mario_P Nov 26 '19 at 13:23
You should use addPoint property rather than addSeries, set yAxis to categories, and determine to which category point should be added - (i.e. y: 0 or y: 2 etc). See: https://jsfiddle.net/BlackLabel/5q3nc4pf/ API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint – Sebastian Wędzel Nov 26 '19 at 14:20
Thank you for the answer, what if i had to load points from a function like: ` function testing() { var chart = $("container").Highcharts(); chart.series[0].addPoint( { start: Date.UTC(2017, 11, 18, 12, 01), end: Date.UTC(2017, 11, 18, 12, 30), y: 0 } ); } Highcharts.ganttChart('container', {...` Would that work, or i need to use events? thx – Mario_P Nov 28 '19 at 16:35
@Mario_P are you able to reproduce your code on the online editor? – Sebastian Wędzel Nov 29 '19 at 08:58
I am thinking different approaches to populate the gantt chart, one by one from a model passed by the controller, or in bulk from a json file, my previous question would be related to adding it one by one (tha'ts why the add data ), but thinking about it now it could be better to import it from json, i still have some problems on the json itself with the unnecessary \n and " – Mario_P Dec 11 '19 at 15:41
If you will need help with your Highcharts code - please reproduce it on the online editor which I could work on. – Sebastian Wędzel Dec 12 '19 at 13:12

Add series / data to highchart gantt from function

1 Answers1