Javascript amcharts Yaxis minimum values should be set as "00:00"

0
votes

I am trying to get the time axis (Yaxis/ValueAxis) set as minimum to "00:00" in AmCharts.

Code below:

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "color": "black",
  "dataDateFormat": "HH:NN:SS",
  "dataProvider": [{
      "businessDate": "01/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "02/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "03/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "06/08/18",
      "duration": 657,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "07/08/18",
      "duration": 578,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "08/08/18",
      "duration": 694,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "09/08/18",
      "duration": 512,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "10/08/18",
      "duration": 672,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "13/08/18",
      "duration": 483,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "14/08/18",
      "duration": 663,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "15/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "16/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "17/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "20/08/18",
      "duration": 637,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "21/08/18",
      "duration": 624,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "22/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "23/08/18",
      "duration": 666,
      "reportPrintTime": "06:55:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "24/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "27/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "28/08/18",
      "duration": 563,
      "reportPrintTime": "05:12:00",
      "sla": "06:30:00",
    }
  ],
  "valueAxes": [{
      "id": "v1",
      "position": "left",
      "title": "Time of the Day",
      "type": "date",
      "period": "a",
      "minimum":"00:00",
      "minPeriod": "ss",
    }, {
      "id": "v2",
      "unitPosition": "left",
      "position": "right",
      "title": "Duration of the Execution",

      "duration": "mm",
      "durationUnits": {
        "hh": "h ",
        "mm": "min"
      }

    }

  ],
  "startDuration": 1,
  "graphs": [{
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "duration",
      "valueAxis": "v2",
      "fillColor": "#e8e8e3",
      "balloonText": "Duration : [[value]]",
      "balloon": {
        "adjustBorderColor": true,
        "color": "black",
        "cornerRadius": 5,
        "fillColor": "#FFFFFF"
      }
    }, {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "bullet": "round",
      "lineColor": "blue",
      "bulletBorderColor": "blue",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "reportPrintTime",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "Report Print Time : <b>[[value]]</b>"
    },
    {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "lineColor": "red",
      "bullet": "square",
      "bulletBorderColor": "red",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "sla",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "SLA : <b>[[value]]</b>"
    }
  ],
  "chartCursor": {
    "categoryBalloonDateFormat": "DD",
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
    "fullWidth": true,
    "valueBalloonsEnabled": true,
    "zoomable": false
  },
  "categoryField": "businessDate",
  "categoryAxis": {
    "gridPosition": "start",
    "autoGridCount": false,
    "gridCount": 1000,
    "title": "Business Dates (in 'dd/mm/yy' format)",
    "labelRotation": 75
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<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/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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

The requirement is :

(a) The blue line (report print time) is getting messed up with the Horizontal axis

(b) The red line (SLA) is also getting plotted at the top of the chart, there should be some margin - and the chart should be plotted exactly in the center.

I am trying setting the 'minimum' property for the value axis as "00:00" , but it din't worked. Any suggestions would be highly appreciated!

1
javascriptchartsamcharts
Please paste your code here and put the additional link to jsfiddle in there. If the jsfiddle gets deleted, the whole question becomes meaningless. Also, try to use proper formating. That will greatly improve your odds of getting help. - Xan-Kun Clark-Davis

1 Answers

0
votes

You need to use minimumDate since you're using a date-based value axis. Maximum date is set through maximumDate, which you'll want to use if you want to adjust the position of the red line to fall more in the center. You'll also want to set markPeriodChange to false if you want to force "00:00" to be visible as time-only dates are assumed to be set on January 1st.

Updated code below:

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "color": "black",
  "dataDateFormat": "HH:NN:SS",
  "dataProvider": [{
      "businessDate": "01/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "02/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "03/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "06/08/18",
      "duration": 657,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "07/08/18",
      "duration": 578,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "08/08/18",
      "duration": 694,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "09/08/18",
      "duration": 512,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "10/08/18",
      "duration": 672,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "13/08/18",
      "duration": 483,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "14/08/18",
      "duration": 663,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "15/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "16/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "17/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "20/08/18",
      "duration": 637,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "21/08/18",
      "duration": 624,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "22/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "23/08/18",
      "duration": 666,
      "reportPrintTime": "06:55:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "24/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "27/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "28/08/18",
      "duration": 563,
      "reportPrintTime": "05:12:00",
      "sla": "06:30:00",
    }
  ],
  "valueAxes": [{
      "id": "v1",
      "position": "left",
      "title": "Time of the Day",
      "type": "date",
      //"period": "a", //not valid
      "minimumDate": "00:00",
      "maximumDate": "12:30",      //set/adjust if needed.
      "markPeriodChange": false,
      "minPeriod": "ss",
    }, {
      "id": "v2",
      "unitPosition": "left",
      "position": "right",
      "title": "Duration of the Execution",
      "duration": "mm",
      "durationUnits": {
        "hh": "h ",
        "mm": "min"
      }

    }

  ],
  "startDuration": 1,
  "graphs": [{
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "duration",
      "valueAxis": "v2",
      "fillColor": "#e8e8e3",
      "balloonText": "Duration : [[value]]",
      "balloon": {
        "adjustBorderColor": true,
        "color": "black",
        "cornerRadius": 5,
        "fillColor": "#FFFFFF"
      }
    }, {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "bullet": "round",
      "lineColor": "blue",
      "bulletBorderColor": "blue",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "reportPrintTime",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "Report Print Time : <b>[[value]]</b>"
    },
    {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "lineColor": "red",
      "bullet": "square",
      "bulletBorderColor": "red",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "sla",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "SLA : <b>[[value]]</b>"
    }
  ],
  "chartCursor": {
    "categoryBalloonDateFormat": "DD",
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
    "fullWidth": true,
    "valueBalloonsEnabled": true,
    "zoomable": false
  },
  "categoryField": "businessDate",
  "categoryAxis": {
    "gridPosition": "start",
    "autoGridCount": false,
    "gridCount": 1000,
    "title": "Business Dates (in 'dd/mm/yy' format)",
    "labelRotation": 75
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<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/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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>