Question

I have following generated JavaScript-Code to display a chart with HighCharts:

<script type="text/javascript">

var highchartsOptions   = Highcharts.setOptions(Highcharts.theme);
var TaskChart; // Chart-Objekt    
var TaskDuration          = new Array();    
// Save starting points to javascript variables for HighCharts
var startingUTC = 1288102643364;
TaskDuration =  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,206,216,216,206,206];
for(var i = 0; i < TaskDuration.length; i++) {
    if(TaskDuration[i] == 0) {
        TaskDuration[i] = null;
    }
}
</script>
<script type="text/javascript">
$j(document).ready(function() { 
    TaskChart = new Highcharts.Chart({
    credits: {
            enabled: false
    },
    chart: {
      renderTo: "chart01",
      defaultSeriesType: 'area',
      zoomType: 'x',
      spacingBottom: 250
    },
    title: {
      text: "Task Duration"
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%e. %b %Y'   
        },
        offset: 10,
        startOnTick: true,
        maxZoom: 7 * 24 * 3600000 // seven days
    },
    yAxis: {
      title: {
        text: "Duration"
      }
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.series.name +'</b><br/>';            
        }
    },
    plotOptions: {
        area: { 
           stacking: 'normal',
           lineColor: '#666666',
           lineWidth: 1,
           marker: {
              lineWidth: 1,
              lineColor: '#666666'
           }
        }
     },
    series: [
    {
        name: 'Duration',
        pointStart: startingUTC,
        pointInterval: 24*60*60*1000, 
        data: TaskDuration
    }]
  });
});
</script>

The problem is now that I want to remove all the “0” values from the beginning of the TaskDuration series array.

I try to set the values in the array to ‘null’:

for(var i = 0; i < TaskDuration.length; i++) {
    if(TaskDuration[i] == 0) {
        TaskDuration[i] = null;
    }
}

But Highcharts still display the values in the chart.

How to prevent this behavior?

I also try to remove all values from the array until a value which is not “0”. But with this approach the “startingUTC” is wrong. Maybe I have also to recalculate this value…

Regards,
Sandro

Answer 1

You need to remove elements not to set null, use this to remove zero element from array:

var myArray=[];

for(var i = 0; i < TaskDuration.length; i++) {
    if(TaskDuration[i] != 0) {
       myArray.push(TaskDuration[i]);
    }
}

working JSfiddle