Search code examples
javascriptamcharts

Implementing a Gantt chart with amcharts and interval axis

I want to implement a Gantt chart and I have just found amCharts which looks like what I need. They provide this demo for Gantt charts. The problem with that example is that they are using dates for the xAxis. I need to show how some processes are executed on a "tick based" timeline so the values for my xAxis would be 1, 2, 3, 4, 5, 6...

I found that there are different kind of axis types available but the problem with the valueAxis is that I can't draw a column from a value to another so I'm not able to show ranges starting from a different position than 0.

Is there any way to achieve what I want to do with amCharts?

This is a graphic example of what I want to do:

enter image description here

Solution

  • I am not sure what that red little bar means but your chart looks like a Gantt Chart with the candle stick.

    Data

    Assuming the red bar is your low, then you might have data that looks like the following:

    let data = [{
    name: "A",
    open: 0,
    close: 3
}, {
    name: "B",
    low: 2,
    open: 3,
    close: 9
}, {
    name: "C",
    low: 4,
    open: 9,
    close: 13
}, {
    name: "D",
    low: 6,
    open: 15,
    close: 20
}, {
    name: "E",
    low: 8,
    open: 13,
    close: 15
}];

    Candle stick Series

    Then you can create a Gantt chart with a candle stick series. For a candle stick series to display properly, you have to define lowValue, openValue, value and highValue in the data fields of the series:

    ...,
series: [{
    type: "CandlestickSeries",
    dataFields: {
        categoryY: "name",
        lowValueX: "low",
        openValueX: "open",
        valueX: "close",
        highValueX: "close"
    }
}],
...

    Since the graph you want doesn't have to "tail", you can trick amchart4 and use close value as highValue.

    enter image description here

    fiddle: https://jsfiddle.net/davidliang2008/kLzh49fv/

    If you don't assign the highValue field, the range would always start from 0:

    ...,
series: [{
    type: "CandlestickSeries",
    dataFields: {
        categoryY: "name",
        lowValueX: "low",
        openValueX: "open",
        valueX: "close",
        //highValueX: "close"
    }
}],
...

    enter image description here

    Want something fancier?

    To emphasis the low value as the red bar, you can add another StepLineSeries that uses the low values into the chart:

    ...,
series: [{
    type: "CandlestickSeries",
    ...
}, {
    type: "StepLineSeries",
    noRisers: true,
    dataFields: {
        categoryY: "name",
        valueX: "low"
    },
    stroke: "#e62e00",
    strokeWidth: 4,
    startLocation: .3,
    endLocation: .7
}],
...

    enter image description here

    fiddle: https://jsfiddle.net/davidliang2008/cse496zg/