title: Highcharts GANTT chart - need to allow category with no data
body: <p>I am trying to build a GANTT chart as in this JSFiddle example 
  [ <a href="http://jsfiddle.net/2xkfm87e/11/" rel="nofollow">http://jsfiddle.net/2xkfm87e/11/</a> ] (I have now updated this fiddle to the working version using jlbriggs' input below. It also includes some other options I needed -i.e. tooltip on each interval.)</p>
  
  <p>However, I need to display all the categories even if one or more do not have any associated data. The end user needs to be aware that there is no data associated with that category. In my JSFiddle example, the best I could come up with is just use the initial dates and create a point that informs the user that there is no data for that category. I would rather it be null. </p>
  
  <p>Any help with this would be greatly appreciated! </p>
  
  <pre><code>  $(function () {
          // Define tasks
          var tasks = [{
              name: 'Category 1',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2010,5, 21),
                  to: Date.UTC(2015, 5, 21),
                  label: 'Category 1'
              }]
          }, {
              name: 'Category 2- Should be null',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2010,5, 21),
                  to: Date.UTC(2010, 5, 21),
                  label: 'Category 2- Should be null'
              }]
          }, {
              name: 'Category 3',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2011,05,16),
                  to: Date.UTC(2012,03,21 ),
                  label: 'Category 3'
              }, {
                  from: Date.UTC(2013,07,09),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 3'
              }]
          }, {
              name: 'Category 4',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,07,18 ),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 4'
              }]
          }, {
              name: 'Category 5',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,06,17),
                  to: Date.UTC(2014,04,21),
                  label: 'Category 5'
              }, {
                  from: Date.UTC(2015,01,22),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 5'
              }]
          }, {
              name: 'Category 6',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,06,17),
                  to: Date.UTC(2014,04,21),
                  label: 'Category 6'
              }, {
                  from: Date.UTC(2015,01,22),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 6'
              }]
          }, {
              name: 'Category 7',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,06,17),
                  to: Date.UTC(2014,04,21),
                  label: 'Category 7'
              }, {
                  from: Date.UTC(2015,01,22),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 7'
              }]
          }, {
              name: 'Category 8',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,06,17),
                  to: Date.UTC(2014,04,21),
                  label: 'Category 8'
              }, {
                  from: Date.UTC(2015,01,22),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 8'
              }]
          }, {
              name: 'Category 9',
              intervals: [{ // From-To pairs
                  from: Date.UTC(2013,06,17),
                  to: Date.UTC(2014,04,21),
                  label: 'Category 9'
              }, {
                  from: Date.UTC(2015,01,22),
                  to: Date.UTC(2015,05,22),
                  label: 'Category 9'
              }]
          }];
  
          // Define milestones
          /*var milestones = [{
              name: 'Get to bed',
              time: Date.UTC(0, 0, 0, 22),
              task: 1,
              marker: {
                  symbol: 'triangle',
                  lineWidth: 1,
                  lineColor: 'black',
                  radius: 8
              }
          }];
              */
          // re-structure the tasks into line seriesvar series = [];
          var series = [];
          $.each(tasks.reverse(), function(i, task) {
              var item = {
                  name: task.name,
                  data: []
              };
              $.each(task.intervals, function(j, interval) {
                  item.data.push({
                      x: interval.from,
                      y: i,
                      label: interval.label,
                      from: interval.from,
                      to: interval.to
                  }, {
                      x: interval.to,
                      y: i,
                      from: interval.from,
                      to: interval.to
                  });
  
                  // add a null value between intervals
                  if (task.intervals[j + 1]) {
                      item.data.push(
                          [(interval.to + task.intervals[j + 1].from) / 2, null]
                      );
                  }
  
              });
  
              series.push(item);
          });
  
          // restructure the milestones
          /*$.each(milestones, function(i, milestone) {
              var item = Highcharts.extend(milestone, {
                  data: [[
                      milestone.time,
                      milestone.task
                  ]],
                  type: 'scatter'
              });
              series.push(item);
          });
              */
  
          // create the chart
          var chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container'
              },
  
              title: {
                  text: 'Category History'
              },
  
              xAxis: {
                  type: 'datetime'
              },
  
              yAxis: {
  
                  categories: ['Category 9',
                               'Category 8',
                               'Category 7',
                               'Category 6',
                               'Category 5',
                               'Category 4',
                               'Category 3',
                               'Category 2',
                               'Category 1'],
                  tickInterval: 1,            
                  tickPixelInterval: 200,
                  labels: {
                      style: {
                          color: '#525151',
                          font: '12px Helvetica',
                          fontWeight: 'bold'
                      },
                     /* formatter: function() {
                          if (tasks[this.value]) {
                              return tasks[this.value].name;
                          }
                      }*/
                  },
                  startOnTick: false,
                  endOnTick: false,
                  title: {
                      text: 'Criteria'
                  },
                  minPadding: 0.2,
                  maxPadding: 0.2,
                     fontSize:'15px'
  
              },
  
              legend: {
                  enabled: false
              },
              tooltip: {
                  formatter: function() {
                      return '&lt;b&gt;'+ tasks[this.y].name + '&lt;/b&gt;&lt;br/&gt;' +
                          Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                          ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                  }
              },
  
              plotOptions: {
                  line: {
                      lineWidth: 10,
                      marker: {
                          enabled: false
                      },
                      dataLabels: {
                          enabled: true,
                          align: 'left',
                          formatter: function() {
                              return this.point.options &amp;&amp; this.point.options.label;
                          }
                      }
                  }
              },
  
              series: series
  
          });        
     });
  </code></pre>