Skip to content
← Highcharts Javascript API

I suggest you ...

Highcharts Javascript API

Categories

JUMP TO ANOTHER FORUM

(thinking…)

Gantt chart

http://en.wikipedia.org/wiki/Gantt_chart

1,130 votes
Vote

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
You have left! (?) (thinking…)
PabloSN shared this idea  ·   ·  Report…  ·  Admin →

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Anonymous commented  ·   ·  Report

    1.can use date or date time to define the line
    2.if can add "weight" factor, more weight means the line more high, display big thing

  • Anonymous commented  ·   ·  Report

    Do you already have an idea when Gantt charts could become available as separate chart type?

  • Bruce Axtens commented  ·   ·  Report

    Brilliant work. Thanks!

    http://jsfiddle.net/bugmagnet/wjp6q268/ shows an attempt to deal with overlapping tasks of the same project.

    Please notice that I have presented 'Project 1' in 2 different ways

    The first style of display is the top row, which is comprised of 2 tasks. The second task over laps the first

    The second style of display utlises the middle and the bottom rows, each row comprising a single task. As shown, the middle row task overlaps the bottom row task.

    My goal is to display both the tasks (of the same project) in one row, but have the control over the height of each task.

    For example, the first task would use "height: metrics.width" whereas the second task woudl use "height: metrics.width * 0.7"

    This requirement is designed to show any collisions for a single project, using one row.
    It will remove any obscuring tasks from one another.

    So the tasks will be offset from each other vertically. Is that even remotely possible?

  • Eric Nadler commented  ·   ·  Report

    Thank you, Torstein. I assume this will be the final implementation of Gantt charts, satisfying the Gantt chart product in the roadmap? I just wanted to be sure if I should code to this or wait for the final Gantt product. Thanks again!

  • David Boardman commented  ·   ·  Report

    The tooltip that appears seems to be linked to the first category value having in a given timeframe. For example, in Tornstein's fiddle (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/), hovering over the "development" category between the dates Dec 10th and Dec 13th shows the tooltip for the "testing" category which also shares these dates. Any thoughts about how to limit the tooltip to a given category would be wonderful.

  • Anonymous commented  ·   ·  Report

    Thanks @Stephane

    I'm trying to use your Gantt chart now and it appears the xAxis min/max it is a little wonky. I've got a page with 2 charts, a spline and your gantt, one on top of the other. I'd like the axis to line up on each of the charts and I've tried to make the min/max of each chart equal. Unfortunately the Gantt chart appears to be adding a little extra, and the two charts won't properly align.

    Here is the fiddle:
    http://jsfiddle.net/o0hnv6mp/

    The first point on the spline series should line up with the left edge of the first bar, but as you can see that's not the case.

  • Joseph Amato commented  ·   ·  Report

    Using the column-range chart, as suggested, I have been able to get it to do exactly what I want it to. Here is a fiddle for posterity: http://jsfiddle.net/Ye3Ak/4/

    I may not be doing it in the most efficient way, but it works perfectly and addresses my concerns. Thank you very much for your help.

  • AdminTorstein Hønsi (CPO, Founder, Highcharts JS) commented  ·   ·  Report

    Actually I think a horizontal columnrange chart is better suited for emulating a Gantt chart. You can add multiple points to the same x value, and use a datetime axis for the Y axis. I'm sorry I don't have time to show you a demo right now.

  • Joseph Amato commented  ·   ·  Report

    So, I was able to do some modifications to the posted code and get something similar to what I was going for. The fiddle for it is here: http://jsfiddle.net/Ye3Ak/2/

    I still have two questions though:

    1. In order to set make the lines more visible, I had to set the line width fairly high. This causes the ends of the lines to overlap, and makes it difficult to clearly see where one time period ends and the other begins. is there any way to have a sharp cutoff (similar to a bar chart) while still retaining the line width?

    2. The tooltip is very wonky. It'll usually identify the proper series, but I can't figure out how it determines the value. Ideally, I would be able to hover over one of the time periods, and it would show me the time range for that period.

    Any suggestions would be greatly appreciated.

  • Joseph Amato commented  ·   ·  Report

    Torstein, is there any way to using existing features to accomplish something similar to what is seen in this image:
    http://imgur.com/y57ImT6

    If not, are there any plans to make such a feature available?

  • Daduke commented  ·   ·  Report

    Implementing a Gantt Chart from line chart is pretty easy, and there is really no need implement a new type of graph...
    I am implementing a Gantt Chart app for Splunk using highcharts just the same way the fiddle do and it is working perfectly!
    You just need to work a bit on the legend, and what you want to show hide... but that is fine, everything required is in highcharts.
    It is not like you're trying to do a bar out of a pie chart... Here is the trick: just increase the linewidth of a line chart and it will do the trick.

  • Jean-Michel Garnier commented  ·   ·  Report

    This feature is 2nd in the list. Do you have an idea of when will it be planned? 2013?

  • coke Ito commented  ·   ·  Report

    Hello.

    I need to setup the gantt values per hour to display true or false for different lines( dates) like the one that i did with fusiocharts, is this possible?.

    This is how i need to get it displayed (http://i.imgur.com/O05BB.png)

    Thanks

  • Duck commented  ·   ·  Report

    hmmm, seriouse guys, how hard can it be, give us the gantt chart. EVERYONE wants it.

  • Anonymous commented  ·   ·  Report

    formatter: function() {
    if(this.value == -1) return "";
    else if(this.value == tasks.length) return "";
    else return tasks[this.value] == undefined ? "" : tasks[this.value].name ;

1 2 4 6