CODEWITHSUNDEEP
javascriptamchartsgantt-chart
Lyra
Lyra

Reputation: 301

amcharts gantt axis reverting to time instead of date

I'm trying to build a Gantt chart based on amcharts. I will probably have only one item per line though, so I tried with the sample _JSON_ganttDateBased but when I leave only one item per row (John, Smith and Ben only have one task each), the X axis reverts to time instead of date.

I looked into floating bar as a possible way around but I'm not sure I can put dates on the axis.

Thanks

Upvotes: 1

Views: 1637

Answers (1)

martynasma
martynasma

Reputation: 8595

This happens because the total time span is small and there's plenty of space to put grid lines / labels on X axis. So the chart reverts to lines.

This can be easily resolved by enforcing the granularity for your value axis to daily:

"valueAxis": {
  "type": "date",
  "minPeriod": "DD"
}

That should revert your axis increments back to days.

Here's a working example:

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "gantt",
  "period": "DD",

  "valueAxis": {
    "type": "date",
    "minPeriod": "DD"
  },
  "brightnessStep": 10,
  "graph": {
    "fillAlphas": 1,
    "balloonText": "[[open]] - [[value]]"
  },
  "rotate": true,
  "categoryField": "category",
  "segmentsField": "segments",
  "dataDateFormat": "YYYY-MM-DD",
  "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
    "category": "John",
    "segments": [ {
      "start": "2015-01-02",
      "end": "2015-01-03"
    } ]
  }, {
    "category": "Smith",
    "segments": [ {
      "start": "2015-01-01",
      "end": "2015-01-02"
    } ]
  }, {
    "category": "Ben",
    "segments": [ {
      "start": "2015-01-06",
      "end": "2015-01-09"
    } ]
  } ],
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true
  },

  "chartScrollbar": {

  }
} );
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

Upvotes: 1

Related Questions