CODEWITHSUNDEEP
highcharts
Johannes Christ
Johannes Christ

Reputation: 109

Highcharts chart update function causes missing data point

I built an area chart with data from a google spreadsheet and a chart update function on button click: see fiddle

The chart update function changes the column of the spreadsheet that is displayed in the chart:

    $(document).ready(function(){
  $("#total").click(function(){
              var chart = $('#container').highcharts();  
              chart.update({
                        yAxis: [{
                          min: -6000,
                          max: 6000,
                          tickPositions: [0, 2000, 4000, 6000]
                        },
                        {
                          min: -600,
                          max: 600,
                          tickPositions: [200, 400, 600]
                        }],
                        data: {
                               seriesMapping: [{
                                x: 0,
                                y: 1,
                                case_bis4: 2, 
                                case_5bis14: 3,
                                case_15bis34: 4,
                                case_35bis59: 5,
                                case_60bis79: 6,  
                                case_ab80: 7,
                                death_total: 8,
                                death_bis4: 9,  
                                death_5bis14: 10,  
                                death_15bis34: 11, 
                                death_35bis59: 12,
                                death_60bis79: 13,
                                death_ab80: 14
                              },
                              {
                                x: 0,
                                y: 8,
                                case_total: 1,
                                case_bis4: 2, 
                                case_5bis14: 3,
                                case_15bis34: 4,
                                case_35bis59: 5,
                                case_60bis79: 6,  
                                case_ab80: 7,
                                death_bis4: 9,  
                                death_5bis14: 10,  
                                death_15bis34: 11, 
                                death_35bis59: 12,
                                death_60bis79: 13,
                                death_ab80: 14
                              }]
                        }
                    });               
  });
});

Unfortunately each time a button is clicked one more data point gets lost. What went wrong?

Upvotes: 0

Views: 158

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Thank you for sharing it. It seems like a bug to me, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/14189

As I understood you would like to create a custom legend and I think that it could be achieved in a different way (to avoid the chart.data update). My idea is to loop through the series and hide or show them.

Here is a simple demo: https://jsfiddle.net/BlackLabel/emyq7j94/ - you can test it by clicking the ab80, 60 bis 79 and alle.

Each button triggers a similar functionality (which you can save as an outstanding function):

  chart.series.forEach((s, i) => {
    if (i !== 5 && i !== 12) {
      s.hide()

    } else {
      s.show()
      s.update({
        visible: true
      }, false)
    }
  })

Upvotes: 1

Related Questions