Amcharts: Gantt - duration in float - javascript

Is it possible to enter duration in floats, for example, 0.89
My fiddle - https://jsfiddle.net/sachinpsingh/36xqwskf/1/
I tried but it seems to accept only integer values.
The Code -
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"period": "fff",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"balloonDateFormat": "QQQ",
"columnWidth": 0.5,
"marginBottom": 30,
"valueAxis": {
"type": "date",
"minPeriod": "fff",
"ignoreAxisWidth": true
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[duration]]ms"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01 00:00:00",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}]
}],
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}
});
When I define "duration": 4.88, it shows in the chart as "duration": 4 (only integer value).
I want that it should show 4.88 as the size in chart.


I figured out a solution -
just need to replace the "type": "date", to "type": "time",
just as below -
"valueAxis": {
"type": "time",
"minPeriod": "fff",
"ignoreAxisWidth": true
}
It Works!

Related

Declaring minimal width of serie in treemap

I have treemap chart and it has two values Squadra2 with value of 13778.00 and Squadra1 with value of 16.00
Now when treemap renders it takes percentage difference between them and split them accordingly BUT now I ended up in situation where I need to be sniper precise in order to select Squadra1 with value of 16.00
As you can see in the picture
Is there a possibility to declare for example minimal width of Squadra1, and to disallow it to go under that value ( to remain clickable ) ?
Please let me know, thank you
{
"chart": {
renderTo:"container",
"backgroundColor": "#FFFFFF"
},
"colorAxis": {
"labels": {
"enabled": false
},
"tickLength": 0,
"gridLineWidth": 0,
"min": 0,
"max": 20,
"stops": [
[
-0.001,
"#ffffff"
],
[
0.5,
"#7cb5ec"
],
[
0.501,
"#7cb5ec"
],
[
0.499,
"#ffffff"
],
[
1,
"#434348"
],
[
1.001,
"#434348"
]
]
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#FFF"
}
},
"tooltip": {},
"series": [
{
"drillUpButton": {
"position": {
"align": "center",
"verticalAlign": "bottom"
},
"theme": {
"fill": "white",
"stroke-width": 1,
"stroke": "silver",
"r": 2,
"style": {
"fontSize": "12px"
},
"states": {
"hover": {}
}
}
},
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levelIsConstant": false,
"levels": [
{
"level": 1,
"dataLabels": {
"enabled": true
},
"borderWidth": 6,
"borderColor": "#FFFFFF"
}
],
"data": [
{
"id": "id_0",
"name": "Squadra1",
"parentName": "Squadra1"
},
{
"id": "id_0_0",
"name": "ACC",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 1,
"colorValue": 1.8117836848479765
},
{
"id": "id_0_1",
"name": "FEB",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 0,
"colorValue": 5.48633338681632
},
{
"id": "id_0_2",
"name": "MAG",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 8,
"colorValue": 3.4398769612396007
},
{
"id": "id_0_3",
"name": "PAM",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 7,
"colorValue": 2.775814171372472
},
{
"id": "id_1",
"name": "Squadra2",
"parentName": "Squadra2"
},
{
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 13778,
"colorValue": 13.595706940649173
}
],
"events": {},
"_colorIndex": 0
}
],
"subtitle": {
"text": "",
"align": "",
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
}
},
"title": {
"text": "",
"align": "",
"style": {
"color": "",
"fontWeight": "none",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none"
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
},
"position": {
"align": "",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"turboThreshold": 5000,
"colorByPoint": false
}
}
}
Link of fiddle
http://jsfiddle.net/3k5fmrut/2/

The easiest way to achieve it is to set a smaller value for Squadra2 and add an additional property with real value to point object that can be used in tooltip.formatter callback to present the real value in the tooltip. Check demo and code posted below.
Code:
data:
{
"id": "id_1",
"name": "Squadra2",
"realValue": 13778,
"parentName": "Squadra2"
}, {
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 137.78,
"colorValue": 13.595706940649173
}
tooltip.formatter:
tooltip: {
formatter: function() {
return this.point.realValue;
}
}
Demo:
https://jsfiddle.net/BlackLabel/trz96fy7/

You can define your own algorithm to build the treemap : Highcharts treemap series
You could choose an algorithm such that each element has a minimum width and height, and the biggest elements share the remaining space.

Period space amChart

I use the library amchart to generate a chart with the plugin dataLoader
. But each time there is one day empty at the begin and the end of the chart for no reason. Did someone already get this error?
-- EDIT FIDDLE --
I create a fiddle using the example data from amchart that you can find here. I just change the chart type to "line" and the default period to "10D" and as you can see there is still a space on the right of the chart (if also at left as well if you change the period). Is it possible to erase it?
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "none",
//"color": "#fff",
"dataSets": [ {
"title": "MSFT",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
},
/**
* data loader for events data
*/
"eventDataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true,
"postProcess": function( data ) {
for ( var x in data ) {
switch ( data[ x ].Type ) {
case 'A':
var color = "#85CDE6";
break;
default:
var color = "#cccccc";
break;
}
data[ x ] = {
"type": "pin",
"graph": "g1",
"backgroundColor": color,
"date": data[ x ].Date,
"text": data[ x ].Type,
"description": "<strong>" + data[ x ].Title + "</strong><br />" + data[ x ].Description
};
}
return data;
}
}
}, {
"title": "TXN",
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": true,
"categoryField": "Date",
"dataLoader": {
"url": "https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
} ],
"dataDateFormat": "YYYY-MM-DD",
"panels": [ {
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"type": "line",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
} ],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"columnWidth": 0.6,
"showCategoryAxis": false,
"stockGraphs": [ {
"valueField": "volume",
"openField": "open",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#fff",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"useDataSetColors": false
} ],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
},
"valueAxes": [ {
"usePrefixes": true
} ]
}
],
"panelsSettings": {
// "color": "#fff",
"plotAreaFillColors": "#333",
"plotAreaFillAlphas": 1,
"marginLeft": 60,
"marginTop": 5,
"marginBottom": 5
},
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW",
"backgroundColor": "#333",
"graphFillColor": "#666",
"graphFillAlpha": 0.5,
"gridColor": "#555",
"gridAlpha": 1,
"selectedBackgroundColor": "#444",
"selectedGraphFillAlpha": 1
},
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 1,
"inside": false,
"showLastLabel": true
},
"chartCursorSettings": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"legendSettings": {
//"color": "#fff"
},
"stockEventsSettings": {
"showAt": "high",
"type": "pin"
},
"balloon": {
"textAlign": "left",
"offsetY": 10
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "DD",
"count": 10,
"label": "10D",
"selected": true
}, {
"period": "MM",
"count": 1,
"label": "1M"
}, {
"period": "MM",
"count": 6,
"label": "6M"
}, {
"period": "YYYY",
"count": 1,
"label": "1Y"
}, {
"period": "YYYY",
"count": 2,
"label": "2Y"
},
/* {
"period": "YTD",
"label": "YTD"
},*/
{
"period": "MAX",
"label": "MAX"
}
]
}
} );
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#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/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.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" />
<div id="chartdiv"></div>

Finally,
in your example in "categoryAxesSettings": change "startOnAxis" to true
"categoryAxesSettings": {
"equalSpacing": true,
"gridColor": "#555",
"gridAlpha": 1,
"startOnAxis" : true, // add this line
},
follow this doc: https://docs.amcharts.com/3/javascriptstockchart/CategoryAxis#startOnAxis

'panEventsEnabled = false' not working in AmCharts

I am using AmCharts of stock type for displaying graph. The problem is that on mobile devices it consumes touch & does not scroll. I have set "panEventsEnabled": false. But it still consumes the touch and on desktop browser I am still able to pan the graph. I don't get why it is not disabling the panEvent.
Below is my chart object. panEventsEnabled=false is set in the end.
var chartObject = {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm",
"maxSeries": 250,
"groupToPeriods": [ "mm", "10mm", "30mm", "hh", "3hh", "DD", "3DD", "WW", "MM", "YYYY"]
},
"dataSets": [ {
"color": "#00e673",
"fieldMappings": [ {
"fromField": "close",
"toField": "value"
}, {
"fromField": "volumeto",
"toField": "volume"
} ],
"categoryField": "time"
}],
"balloon": {},
"panels": [ {
"showCategoryAxis": true,
"categoryBalloonEnabled": false,
"recalculateToPercents": "never",
"title": "Value",
"percentHeight": 60,
"stockGraphs": [ {
"id": "g1",
"title": Value,
"precision": 2,
"valueField": "value",
"type": "line",
"compareable": true,
"lineThickness": 2,
"balloonText": "close: [[value]]",
"fillAlphas": 0.6
} ],
"stockLegend": {
"valueTextRegular": ": [[value]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"precision": 2,
"valueField": "volume",
"type": "column",
"cornerRadiusTop": 2,
"fillAlphas": 1
} ],
"stockLegend": {
"valueTextRegular": "Volume: [[value]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "10mm",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorColor": "#ff0000",
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "top",
"dateFormat": "YYYY-MM-DD JJ:NN",
//"periodContainer":{},
"hideOutOfScopePeriods":false,
"inputFieldsEnabled": false,
"inputFieldWidth": 100,
"periods": [ {
"period": "mm", //histomin limit 60
"count": 60,
"minPeriod": "mm",
"label": "1H"
}, {
"period": "mm",//histomin limit 1440 //autogroup
"minPeriod": "mm",
"count": 1440,
"label": "1D"
},{
"period": "DD",//histohour limit 168
"count": 7,
"label": "1W"
}, {
"period": "MM",//histohour limit 744
"count": 1,
"label": "1M"
}, {
"period": "MM",//histoday limit 93
"count": 3,
"label": "3M"
},{
"period": "YYYY",//histoday limit 365
"count": 1,
"label": "1Y"
}, {
"period": "MAX",//histoday all
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": false,
"creditsPosition":"bottom-left",
"panEventsEnabled": false
},
};

Use the responsive plugin instead and override selectWithoutZooming.
"responsive": {
"enabled": true,
"rules": [{
"maxWidth": 800,
"overrides": {
"chartCursorSettings": {
"selectWithoutZooming": true
}
}
}]
}
Check an example here: https://codepen.io/team/amcharts/pen/80a7ccf3fb8d2c04d00ef9121ca0806c?editors=1010

How can I change color of StockEvent baloon's border [AmCharts v3]

Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );

You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.

amCharts group by Date

I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?

According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>

Categories