CODEWITHSUNDEEP
angularhighcharts
Sayak Mukhopadhyay
Sayak Mukhopadhyay

Reputation: 1464

Making a timeline in Highcharts

I am looking to make a timeline in Highcharts using the current stable build. I know that Gantt chart is under development but it has been in Alpha for a long time now and I am looking at using something that is stable. There is a related question but the fiddles in that question are not working anymore. Moreover I am integrating this in my Angular 4 project using https://github.com/gevgeny/angular2-highcharts which itself has not been maintained for a long time.

I want to create something like the following http://jsfiddle.net/214uj22k/1/ but I am at a loss if this can be done in the current build with either Highcharts or Highstocks.

Fiddle Code:

var today = new Date(),
    day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART
Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Timeline'
    },
    xAxis: {
            type: 'datetime',
        min: today - 10 * day,
        max: today
    },

    /*
    plotOptions: {
        gantt: {
            pathfinder: {
                type: 'simpleConnect'
            }
        }
    },
    */

    series: [{
        name: 'State 1',
        data: [{
            taskName: 'System 1',
            start: today - 10 * day,
            end: today - 7 * day
        }, {
            taskName: 'System 2',
            start: today - 6 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 3',
            start: today - 7 * day,
            end: today - 2 * day
        },{
            taskName: 'System 1',
            start: today - 3 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 2',
        data: [{
            taskName: 'System 1',
            start: today - 7 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 2',
            start: today - 10 * day,
            end: today - 6 * day
        }, {
            taskName: 'System 3',
            start: today - 2 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 3',
        data: [{
            taskName: 'System 2',
            start: today - 3 * day,
            end: today - 0 * day
        }, {
            taskName: 'System 3',
            start: today - 10 * day,
            end: today - 7 * day
        }]
    }]
});

Upvotes: 1

Views: 2917

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Check x-range highcharts. I have modified data series to took like timeline.

Highcharts.chart('container', {
  chart: {
    type: 'xrange'
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  plotOptions: {
    series: {
      dataLabels: {
        align: 'center',
        enabled: true,
        format: "{point.name}"
      }
    }
  },
  tooltip: {
    formatter: function() {
    console.log(this)
      return this.point.name+' is in <b>'+this.yCategory+'</b><br>  from <b>' + Highcharts.dateFormat('%e %b %Y',
          new Date(this.x)) +
        ' to '+ Highcharts.dateFormat('%e %b %Y',
                                          new Date(this.x2))+'</b> ';
    }
  },
  series: [{
    name: 'Project 1',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 0,
      name: 'Proto1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 0,
      name: 'Proto2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 0,
      name: 'Proto3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 10, 25),
      y: 1,
      name: 'Dev1'
    }, {
      x: Date.UTC(2014, 10, 25),
      x2: Date.UTC(2014, 11, 5),
      y: 1,
      name: 'Dev2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 1,
       name: 'Dev3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 2,
      name: 'Test1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 2,
      name: 'Test2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 2,
      name: 'Test3'
    }, ],
    dataLabels: {
      enabled: true
    }
  }]

});

Fiddle demo

Updating as per OP

1> Using grouping: false check dataGrouping

2> Using style-by-css

Also I made change to <script src="https://code.highcharts.com/highcharts.js"></script>

Updated fiddle

css

.highcharts-series-0 .highcharts-point {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}

.highcharts-series-1 .highcharts-point {
  fill: #434348;
  stroke: #434348;
}

.highcharts-series-2 .highcharts-point {
  fill: #90ed7d;
  stroke: #90ed7d;
}

Upvotes: 1

Related Questions