Search code examples
javascriptchartsamchartsgantt-chart

amCharts date-time value issue, can not set hh:mm time

I'm new on amCharts to create ganttCharts and the others. I'm trying to create a gantt chart and set some time value to each column. So I can create with these lines;

{
        "category": "Planned", 

        "segments": [   {
         "start": 8,
            "duration": 9,           
            "color": "#46615e",
             "task": "Order"
        } ,{
         "start": 18,
            "duration": 1,           
            "color": "#46615e",
             "task": "Order"
        } ,{
         "start": 20,
            "duration": 1,           
            "color": "#46615e",
             "task": "Order"
        } 
 ]
    }

But for start value, instead of 8,18,20, I want to write 08:18, 18:22, 20:25 and something like these.

But it does not work with these values.. do you have any idea? I will share all code below.

   <!-- Styles -->
    <style>
    #chartdiv {
      width: 100%;
      height: 500px;
    }                                                                   
    </style>

    <!-- Resources -->

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

    <!-- Chart code -->
    <script>
    var chart = AmCharts.makeChart( "chartdiv", {
        "type": "gantt",
        "theme": "dark",
        "marginRight": 70,
        "period": "hh",
        "dataDateFormat":"YYYY-MM-DD hh:nn",
        "balloonDateFormat": "JJ:NN",

        "columnWidth": 0.5,
        "valueAxis": {
            "type": "date",
             "parseDates": true,
              "minPeriod": "mm"
        },
        "brightnessStep":  0,
        "graph": {
            "fillAlphas": 0.5,  
            "balloonText": "<span style='font-size:11px'>[[category]] -> [[task]]</span>",
            "labelText": "[[task]]",
            "labelPosition": "left",
             "labelOffset": 0,
        },
        "rotate": true,
        "categoryField": "category",
        "segmentsField": "segments",
        "colorField": "color",
        "startDate": "2018-10-02 00:00", 
        "startField": "start",
        "endField": "end",
        "durationField": "duration",
        "dataProvider": [ {
            "category": "",
            "segments": [   {
             "start": 7,
                "duration": 17,           
                "color": "#fff" 
            }  ]
        }, {
            "category": "Column A", 

            "segments": [   {
             "start": 8,
                "duration": 9,           
                "color": "#46615e",
                 "task": "Order"
            } ,{
             "start": 19,
                "duration": 1,           
                "color": "#46615e",
                 "task": "Order"
            } ,{
             "start": 21,
                "duration": 1,           
                "color": "#46615e",
                 "task": "Order"
            } 
     ]
        },  {
            "category": "Column B",
            "segments": [ {
                "start": 8,
                "duration": 8,
                "color": "#8dc49f",
                "task": "Order"
            }, {
                "start": 17,
                "duration": 2,
                "color": "#8dc49f",
                 "task": "Order"
            }, {
                "start": 20,
                "duration": 2,
                "color": "lightblue",
                "task": "Order"
            } ]
        }],
        "chartCursor": {
            "cursorColor":"#55bb76",
            "valueBalloonsEnabled": false,
            "cursorAlpha": 0,
            "valueLineAlpha":0.5,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "zoomable":false,
            "valueZoomable":true
        } 
    } );
    </script>

    <!-- HTML -->
    <div id="chartdiv"></div>

enter image description here

Solution

  • Values mapped by the startField and endField only accept numeric values. If you want to set times, you have to use dates through startDateField and endDateField. 

      "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
     // ...
    "segments": [ {
      "start": "2016-01-01 08:18",
      "end": "2016-01-11 18:18",

    Check this example. While it only uses dates, you can provide a datetime that matches your dataDateFormat.