We Keep Coding

Amcharts: Gantt - duration in float

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!

'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

AmCharts serial chart date ordering issue

I have 4 different data sets data1, data2, data3, data4, each data set contain different dates, so date is not in order, hence graph is not displaying according to date
Here is my code
AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"startDuration": 0.4,
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"trendLines": [],
"applyGapValue": 0,
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "data2",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data1",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data3",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data4",
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"equalSpacing": true,
"minorGridEnabled": true,
"gridPosition": "start",
},
"allLabels": [],
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "top",
},
"dataProvider": [
{
"date": "2017-06-02",
"data1": 202,
}, {
"date": "2017-06-04",
"data1": 420,
}, {
"date": "2017-06-05",
"data1": 910,
}, {
"date": "2017-06-07",
"data1": 60,
},
{
"date": "2017-06-02",
"data2": 110,
}, {
"date": "2017-06-04",
"data2": 920,
}, {
"date": "2017-06-05",
"data2": 320,
}, {
"date": "2017-06-07",
"data2": 355,
},
{
"date": "2017-06-02",
"data3": 80,
}, {
"date": "2017-06-04",
"data3": 350,
}, {
"date": "2017-06-05",
"data3": 710,
}, {
"date": "2017-06-07",
"data3": 710,
},
{
"date": "2017-06-02",
"data4": 580,
}, {
"date": "2017-06-04",
"data4": 510,
}, {
"date": "2017-06-05",
"data4": 702,
}, {
"date": "2017-05-07",
"data4": 940,
}, {
"date": "2017-06-09",
"data4": 940,
},
]
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
in the output I want chart to be displayed according to ordered date, thank you

You can sort the data like this:
chartData.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
});
Let's say you do this before passing it to the dataProvider property.

While you do have to sort the data by dates as previously mentioned, it's not enough for AmCharts. You also need to group the data by date as well or your chart will not render or behave correctly, i.e. the array element with the date "2017-06-02" needs to have the "data1", "data2", "data3", "data4" properties in the same element.
Here's one way to group it (assuming your data is in a variable called chartData):
var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
if (!dataMap[dataItem.date]) {
dataMap[dataItem.date] = {};
}
Object.keys(dataItem).forEach(function(key) { //assign keys to map
if (key !== "date") {
dataMap[dataItem.date][key] = dataItem[key];
dataMap[dataItem.date].date = dataItem.date;
}
});
});
//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
newChartData.push(dataMap[date]);
});
Demo:
var chartData = [
{
"date": "2017-06-02",
"data1": 202,
}, {
"date": "2017-06-04",
"data1": 420,
}, {
"date": "2017-06-05",
"data1": 910,
}, {
"date": "2017-06-07",
"data1": 60,
},
{
"date": "2017-06-02",
"data2": 110,
}, {
"date": "2017-06-04",
"data2": 920,
}, {
"date": "2017-06-05",
"data2": 320,
}, {
"date": "2017-06-07",
"data2": 355,
},
{
"date": "2017-06-02",
"data3": 80,
}, {
"date": "2017-06-04",
"data3": 350,
}, {
"date": "2017-06-05",
"data3": 710,
}, {
"date": "2017-06-07",
"data3": 710,
},
{
"date": "2017-06-02",
"data4": 580,
}, {
"date": "2017-06-04",
"data4": 510,
}, {
"date": "2017-06-05",
"data4": 702,
}, {
"date": "2017-05-07",
"data4": 940,
}, {
"date": "2017-06-09",
"data4": 940,
},
];
var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
if (!dataMap[dataItem.date]) {
dataMap[dataItem.date] = {};
}
Object.keys(dataItem).forEach(function(key) { //assign keys to map
if (key !== "date") {
dataMap[dataItem.date][key] = dataItem[key];
dataMap[dataItem.date].date = dataItem.date;
}
});
});
//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
newChartData.push(dataMap[date]);
});
AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"startDuration": 0.4,
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"trendLines": [],
"applyGapValue": 0,
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "data2",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data1",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data3",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data4",
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"equalSpacing": true,
"minorGridEnabled": true,
"gridPosition": "start",
},
"allLabels": [],
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "top",
},
"dataProvider": newChartData
});
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

How to adjust Amchart Balloon Size

https://i.stack.imgur.com/9R2Hj.png
Hi,
I'm trying to add a line chart with 3 different graphs. The graph rendering is working just fine but the balloons are very unbalanced (see the picture), thus invalid for production usage. It does not help if I add horizontal or vertical paddings.
I must be doing something wrong here but I cannot figure out what it is. Would anyone figure out the reason for the odd balloon behaviour?
var chart3 = AmCharts.makeChart("chartdiv3", {
"type": "serial",
"theme": "light",
"marginRight": 20,
"marginLeft": 50,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"chartCursor": {
"fullWidth": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"valueLineAlpha": 0.5,
"cursorAlpha": 0
},
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff",
"horizontalPadding": 20,
"verticalPadding": 20
},
"dashLength": 3,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletSize": 6,
"hideBulletsCount": 100,
"lineThickness": 2,
"title": "received",
"useLineColorForBulletBorder": true,
"valueField": "Value",
"balloonText": "<span style='font-size:16px;'>[[Value]]</span>"
},
{
"id": "g2",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value2",
"balloonText": "<span style='font-size:12px;'>[[Value2]]</span>"
},
{
"id": "g3",
"balloon": {
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Value3",
"balloonText": "<span style='font-size:12x;'>[[Value3]]</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"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"categoryField": "Date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"dateFormats":
[
{ period: 'fff', format: 'JJ:NN:SS' },
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MM'},
{period: 'YYYY', format: 'YYYY' }
]
},
"export": {
"enabled": true
},
"dataProvider": Home.realizedReturnsChartItems
});
}

Remove grey header-box in AmCharts

While plotting some historical data on a chart I stumbled on this annoying grey box that I can't get rid of.
Basically I started with this example: http://www.amcharts.com/demos/date-based-data/ and did some slight modifications (removed chartScrollbar).
The chart is using type: serial with theme: light.
Still haven't found anything in the documentation http://docs.amcharts.com/3/javascriptcharts/ that resembles this.
I've tried 'guides', 'graphs', 'chartScrollBar' but nothing seems to work.
Appreciate any help in this.
Chart with grey header-box:
AmCharts conf:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartScrollbar": {
"enabled": false
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});

The "grey box" is chart scrollbar. By default chart does not display the scrollbar. So to remove it simply remove it from your chart config altogether:
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 0,
"marginRight": 0,
"autoMarginOffset": 0,
"path": "http://www.amcharts.com/lib/3/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left"
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "bottom"
},
"export": {
"enabled": false
},
"dataProvider": chartData
});