Search code examples
phpamchartsgantt-chart

Change a Gantt chart in amCharts so that the column values are the axis values and the old axis values are the new column values?


I have a Gantt chart using amCharts v3 in PHP, and we would like to swap the column values with the X-axis values. For example, we have an incident Gantt chart which have X-axis values of the locations of incidents and the columns are the staff members of a school that were attached to that location, with how many incidents they were attached to.

I have tried looking for the data that is pulled to create the chart and how they are used, but cannot see how to swap it around. Unfortunately I cannot display code as it is my company's and not mine.


Solution

  • First of all I would recommend to upgrade to amcharts4, because it is much more flexible and has even new chart types. You can migrate easily, beginning with just one chart. You can use amcharts3 and amcharts4 in parallel (Migration Guide).

    With amcharts4 it is possible to swap the xAxis and the yAxis.

    I used the gantt chart from the amcharts demos and updatet it in a code pen.

    If you want to stay with amcharts3 it is also possible to swap xAxis and yAxis. You just have to invert the rotate attribute in the config json:

    var chart = AmCharts.makeChart( "chartdiv", {
        "type": "gantt",
        // your config ...
        "rotate": false,
        // more config ...
    } );
    

    I created another code pen with the full amcharts3 example adapted from the demo chart.