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>
Related
We have upgraded chart.js from version 2 to 3 and now the following is not working. To make a single value, which should be displayed as a line, more readable, the value was simply displayed three times and only a section of the x axis was displayed. As a result, a straight line runs completely from left to right through the whole chart.
Here is an image of what it looked like in V2 vs. now in V3:
Img-Description: left chart with version 2, all lines and areas go from left to right; right chart with version 3, the line starts left but end in the middle and the areas go down after the middle datapoint
We are using the min/max attributes for the x scale. Any ideas?
This is my ChartConfiguration:
const ctx = document.getElementById("ctx").getContext("2d");
const configuration = {
"type": "line",
"data": {
"labels": ["", "2015", ""],
"datasets": [{
"data": [8, 8, 8],
"type": "line",
"label": "Umsatzrentabilität",
"borderColor": "#FF8F00",
"backgroundColor": "#FF8F00",
"fill": false,
"yAxisID": "yRight",
}, {
"data": [18330.47727032784, 18330.47727032784, 18330.47727032784],
"type": "bar",
"label": "Gesamtleistung in TEUR",
"backgroundColor": "rgba(0,152,100,0.8)",
"hoverBackgroundColor": "#009864",
"barPercentage": 0.5,
}, {
"data": [12, 12, 12],
"type": "line",
"label": "Branchenmitte von",
"fill": "+1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}, {
"data": [9, 9, 9],
"type": "line",
"label": "Branchenmitte bis",
"fill": "-1",
"borderColor": "#dddddd",
"backgroundColor": "rgba(60, 60, 60, 0.06)",
"yAxisID": "yRight",
}],
}, "options": {
"maintainAspectRatio": false,
"responsive": true,
"scales": {
"x": {
"axis": "x",
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawTicks": true,
"drawBorder": true,
"drawOnChartArea": true,
},
"min": "2015",
"max": "2015",
"type": "category",
"bounds": "data",
"id": "x",
"position": "bottom",
},
"y": {
"axis": "y",
"title": {
"align": "center",
"display": true,
"text": "Gesamtleistung in TEUR",
"color": "#666",
},
"suggestedMax": 21996.572724393405,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"display": true,
"drawBorder": true,
"drawTicks": true,
"drawOnChartArea": true,
},
"type": "linear",
"id": "y",
"position": "left",
},
"yRight": {
"axis": "y",
"type": "linear",
"display": true,
"position": "right",
"title": {
"align": "center",
"display": true,
"text": "Umsatzrentabilität (%)",
"color": "#666",
},
"suggestedMax": 14.4,
"suggestedMin": 0,
"grid": {
"borderColor": "#bbbbbb",
"color": "#f0f0f0",
"display": true,
"drawBorder": true,
"drawOnChartArea": false,
},
"id": "yRight",
},
},
},
};
new Chart(ctx, configuration);
#ctx {
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="ctx" />
Here is a fiddle with the current version: https://jsfiddle.net/Sue10bach/7q3n6wvb/
I'm using AmChart do display my chart with the information from my server.
If you run the code and scroll down and hover the chart it will display (Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)
I'cant seem to find a way to change the value so it only display the month (Aug OR Sep OR Oct)
Does anyome know how to fix that?
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"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:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
You can modify the format string in the chartCursor's categoryBalloonDateFormat property to "MMM" instead of the default "MMM DD, YYYY".
"chartCursor": {
"categoryBalloonDateFormat": "MMM",
// ...
}
Updated demo below:
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
},
"labelText": "[[category]]",
"labelPosition": "bottom",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"categoryBalloonDateFormat": "MMM"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
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
}
});
I need something like in the picture attached.
Please follow this fiddle
As you can see, I've added two guide lines, but they are not visible, as its values are bigger than graph values.. Is there any way, I can make them visible? Maybe there is some way to zoom chart out or something.. See my code bellow or in jsfiddle.
Thanks,
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0
}],
"graphs": [{
"bullet": "none",
"valueField": "value"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
},
"guides": [{
"value": 25,
"toValue": 25,
"lineColor": "#CC0000",
"fillAlpha": 1,
"fillColor": "#CC0000",
"label": "critical"
}, {
"value": 20,
"toValue": 20,
"lineColor": "#CCF000",
"fillAlpha": 1,
"fillColor": "#CCF000",
"label": "normal"
}]
});
The answer is a value axis setting includeGuidesInMinMax. Just set it to true and it will recalculate value axis scale to include all present guides:
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0,
"includeGuidesInMinMax": true
}]
Here's your updated fiddle.
I realized an amChart with the online generator.
This is the result:
https://live.amcharts.com/ODVhY/
As you can see, the label with the value is visible only on the red bulled.
How can I extend it to all 5 bullet?
My configuration
{
"type": "radar",
"categoryField": "areas",
"colors": [
"#64cbd5",
"#7cdae3"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"addClassNames": true,
"color": "#EEEEEE",
"fontFamily": "Ubuntu",
"fontSize": 12,
"theme": "dark",
"graphs": [
{
"balloonText": "[[value]] in [[category]]",
"bullet": "round",
"bulletAlpha": 0,
"bulletBorderAlpha": 1,
"bulletSize": 17,
"clustered": false,
"columnWidth": 0,
"connect": false,
"cursorBulletAlpha": 0,
"descriptionField": "score",
"fillAlphas": 0.79,
"fillColors": "#64CBD5",
"gapPeriod": 2,
"id": "AmGraph-1",
"labelAnchor": "middle",
"labelOffset": 10,
"labelPosition": "bottom",
"labelText": "[[score]]",
"legendAlpha": 0,
"lineAlpha": 1,
"lineColor": "#64CBD5",
"lineColorField": "color",
"lineThickness": 0,
"minDistance": 0,
"negativeBase": 2,
"showAllValueLabels": true,
"stackable": false,
"switchable": false,
"title": "[[value]] in [[category]]",
"topRadius": 0,
"valueField": "score",
"visibleInLegend": false
}
],
"guides": [],
"valueAxes": [
{
"axisTitleOffset": 20,
"gridType": "circles",
"id": "ValueAxis-1",
"minimum": 0,
"axisAlpha": 1,
"gridAlpha": 0.35,
"labelOffset": 2,
"labelsEnabled": false,
"tickLength": 3
}
],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": [
{
"score": 156.9,
"areas": "MEM",
"color": "#22BCA7"
},
{
"score": 131.1,
"areas": "AGI",
"color": "#76C741"
},
{
"score": 115.8,
"areas": "ATN",
"color": "#FC385A"
},
{
"score": 109.9,
"areas": "PRS",
"color": "#AD78AC"
},
{
"score": 108.3,
"areas": "VSP",
"color": "#FC683E"
}
]
}
As #martynasma said in the comments, it was a bug of amcharts.
It is now fixed in the latest version.