Develop Reference

how to display between dates amcharts using angularjs

In my requirement I need to display the details means the doc start date and expiry date like that. I am using am charts, but I am unable to display between dates details.
Below is my code:
var chart = AmCharts.makeChart("chartdiv", {
"theme": "none",
"type": "serial",
"startDuration": 2,
"dataProvider": [{
"country": "20-10-05,
"visits": "15-03-03",
"color": "#FF0F00"
}, {
"country": "15-03-03",
"visits": "20-10-05,
"color": "#FF6600"
}],
"valueAxes": [{
"position": "left",
"axisAlpha": 0,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 0.85,
"lineAlpha": 0.1,
"type": "column",
"topRadius": 1,
"valueField": "visits"
}],
"depth3D": 40,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
},
"export": {
"enabled": true
}
}, 0);
<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" />
<div id="chartdiv"></div>

AmCharts Serial Chart: Center-align label under the axis points

In this AmCharts serial chart (Line chart), when the line chart gets rendered, the label in the category axis gets right-aligned from the datapoint intersection.
I need these labels to be center-aligned just below the datapoint intersection scale.
This is the current source code:
chart = AmCharts.makeChart(id, {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
"centerLabels":true,
"equalSpacing":false
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
And this is the rendered graph:
How can this be fixed?

To get the label centered directly under the tick when parsing dates, you have to set equalSpacing to true.
var color = "#112233";
var timeperiod = "test";
var dataValue = generateData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMarginOffset": 20,
"usePrefixes":true,
"prefixesOfBigNumbers":[
{"number":1e+3,"prefix":"k"},
{"number":1e+6,"prefix":"M"},
{"number":1e+9,"prefix":"G"},
{"number":1e+12,"prefix":"T"},
{"number":1e+15,"prefix":"P"},
{"number":1e+18,"prefix":"E"},
{"number":1e+21,"prefix":"Z"},
{"number":1e+24,"prefix":"Y"}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"ignoreAxisWidth":false
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0,
},
"graphs": [{
"id": "g1",
"fillColors":color,
"lineColor": color,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"fillColors": color,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "column-2"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": 'JJ-NN'
},
"categoryField": "column-1",
"categoryAxis": {
//"gridPosition": "start", does not work with parseDates
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": false,
"minPeriod": "mm",
"gridPosition":'middle',
//"centerLabelOnFullPeriod":false, //alternate solution but won't center directly under the axis tick
"equalSpacing":true
},
"dataProvider": dataValue,
"export": {
"enabled": true
},
"allLabels": [{
"text": timeperiod,
"align": "center",
"y":0
}]
});
function generateData() {
var data = [];
var firstDate = new Date();
firstDate.setHours(0,0,0,0);
for (var i = 0; i < 10; ++i) {
var newDate = new Date(firstDate);
newDate.setMinutes(i);
data.push({
"column-1": newDate,
"column-2": Math.floor(Math.random() * 20 + 1)
});
}
return data;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
You can also use centerLabelOnFullPeriod if you don't want to use equalSpacing, but it will only position it slightly to the right of the tick but not quite at the center.

initialImage not displayed on top of trendLine in Amcharts

I'm trying to put a image to the beginning of a trend line using the initialImage property of the trendline. But it doesn't come up to the beginning of the trend line.
Here is the code:
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"initialImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
Here is the DEMO.

initialImage is placed at the location defined by initialValue and initialDate, so it actually is being placed at the beginning. In your case, the beginning is at the bottom due to your initial values with respect to the final values. If you want it to appear on top of that particular trendline, set it as the finalImage instead.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop": 0,
"marginRight": 80,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"dataProvider": [{
"year": "2017-10-26 18:45:13",
"value": 80
}, {
"year": "2017-10-26 18:46:13",
"value": 2
}, {
"year": "2017-10-26 18:47:13",
"value": 46
}, {
"year": "2017-10-26 18:48:13",
"value": 22
}, {
"year": "2017-10-26 18:49:13",
"value": 50
}, {
"year": "2017-10-26 18:50:13",
"value": 24
}, {
"year": "2017-10-26 18:51:13",
"value": 7
}, {
"year": "2017-10-26 18:52:13",
"value": 5
}, {
"year": "2017-10-26 18:53:13",
"value": 47
}, {
"year": "2017-10-26 18:54:13",
"value": 35
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#888888",
"lineAlpha": 0,
"toValue": 16,
"value": 10
}],
"position": "left",
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"colorField":"color",
"valueField": "value"
}],
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"finalImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
"categoryField": "year",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"minorGridAlpha": 0.1,
"minorGridEnabled": true,
"minPeriod": "fff"
}
});
/*
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}*/
#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>

Show negative values in stacked chart (amchart)

In the following example, the value of X=X1+X2+X3, and I want to show negative X3 below the zero axis. Also, when computing the percentage value, it appears that negative value of X3 is not taken into account. For example, for year 2001, percentage values for X1, X2, and X3 are computed as 70, 20, and -10, respectively. However, I want these to be (100*(70/(70+20-10)) % (87.5 %), (100*(20/(70+20-10)) % (25%), and (100*(-10/(70+20-10)) % (-12.5 %), respectively.
example here: https://jsfiddle.net/831g79xp/1/
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight":30,
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"valueText": "[[value]] ([[percents]]%)",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"dataProvider": [
{
"year": 2001,
"X1": 70,
"X2": 20,
"X3": -10,
}, {
"year": 2002,
"X1": 80,
"X2": 15,
"X3": -20,
}, {
"year": 2003,
"X1": 90,
"X2": 20,
"X3": -25,
}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "X Components"
}],
"graphs": [{
"balloonText":"<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X1",
"valueField": "X1"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X2",
"valueField": "X2"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X3",
"valueField": "X3"
}
],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "year",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year"
},
"export": {
"enabled": true
}
});

Drawing a chart

I would like to draw a chart using this code
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"dataProvider": [
{
"maand": #Model.Maanden[0],
"neerslag": 33,
"temperatuur": 33
},
{
"maand": "Februari",
"neerslag": 33,
"temperatuur": 33
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1,
"graphs": [
{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Gemiddelde neerslag",
"type": "column",
"valueField": "neerslag"
}, {
"id": "graph2",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Gemiddelde temperatuur",
"valueField": "temperatuur"
}
],
"categoryField": "maand",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
</script>
when I use "maand": #Model.Maanden[0] instead of a string it doesn't draw a chart but I know I can access the properties in the model what am I doing wrong?

Try use "maand": '#Model.Maanden[0]' because if you dont put the '' the javascript will understand that the value of the "maand" is #Model.Maanden[0] and not the value of #Model.Maanden[0].