I am creating an amCharts3 serial chart to show production hourly, forecast and target levels over a 24 hour period (midnight to midnight). The hourly and forecast data are logged every 30 minutes and this will then be displayed as bullet points on the chart. The target data is static value which is represented by a line across the chart
My code for the chart is,
"type": "serial",
"backgroundAlpha": 1,
"plotAreaFillAlphas": 1,
"autoMargin": true,
"autoMarginOffset": 30,
"autoDisplay": true,
"marginRight": 50,
"color": "#000000",
"plotAreaFillColors": scope.config.plotAreaFillColor,
"creditsPosition": "bottom-right",
"titles": createArrayOfChartTitles(),
"fontSize": 11,
"pathToImages": "Scripts/app/editor/symbols/ext/images/",
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",
"axisAlpha": 1,
"axisColor": "black",
"gridAlpha": 0.1,
"autoWrap": true,
"gridThickness": 2,
"title": "Time, hrs"
},
"chartScrollbar": {
"enabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"color": "#000000",
"labelText": "[[title]]",
},
"valueAxes": [
{
"title": "Temperature",
"inside": false,
"axisAlpha": 1,
"axisColor": "black",
"fillAlpha": 0.05,
"gridAlpha": 0.1,
"gridThickness": 2
}
],
"graphs": [
{
"id": "g1",
"title": graph1Label,
"type": "line",
"bullet": "square",
"lineThickness": 0,
"bulletColor": "#0094FF",
"balloonColor": "#0094FF",
"balloonText": "[[timestamp]]<br />[[value1]]",
"valueField": "value1"
},
{
"id": "g2",
"title": graph2Label,
"type": "line",
"bullet": "round",
"lineThickness": 0,
"bulletColor": "#FF8000",
"balloonColor": "#FF8000",
"balloonText": "[[timestamp]]<br />[[value2]]",
"valueField": "value2"
},
{
"id": "g3",
"title": graph3Label,
"type": "line",
"lineThickness": 1,
"lineColor": "#FF0000",
"balloonColor": "#FF0000",
"balloonText": "[[timestamp]]<br />[[value3]]",
"valueField": "value3"
}
],
"dataProvider": dataArray,
"categoryField": "timestamp",
"chartCursor": {
"cursorColor": "gray",
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueZoomable": true,
"categoryBalloonDateFormat": "D/MM/YYYY L:NN:SS A"
},
"zoomOutButtonImage": ""
}
The data displays correctly but I am trying to set the x-axis range to a specific start and end point.
I want the chart to show with the x-axis to be set from midnight to midnight. Even if it is 10am I would like the chart to show the entire 24 hour time range.
Currently the chart shows data from midnight up to the current time it is being viewed. For example midnight to 10am.
I have added images for what the display looks like currently and also what the desired outcome is.
I was able to solve this by using the date padding plugin provided by amCharts.
