We Keep Coding

ClickMarker is not working in XY Amcharts

I have a requirement where I need to use customlegends in XY Amcharts.
I have implemented them, but When I have added event listeners to those legends, the function wasnt triggered. I dont know the reason, can anyone correct me what I have made a mistake.
You can check the following link for the output:
jsfiddle.net/u371jyjs/3/

clickMarker is a legend-specific event, not a top-level chart event. Put the listener for it inside the legend object:
legend: {
// ...
listeners: [{
"event": "clickMarker",
"method": function(event) {
// toggle the marker state
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow();
}
}]
}
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"path": "https://www.amcharts.com/lib/3/",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 2,
"value": 59,
"y2": 5,
"x2": 3,
"value2": 44,
"label": "Hello",
"category": "0",
"column-1": 32
}, {
"y": 5,
"x": 8,
"value": 50,
"y2": 15,
"x2": 8,
"value2": 12,
"label": "Hi",
"category": "1000",
"column-1": 14
}, {
"y": 10,
"x": 8,
"value": 19,
"y2": 4,
"x2": 6,
"value2": 35,
"label": "Yo"
}, {
"y": 6,
"x": 5,
"value": 65,
"y2": 5,
"x2": 6,
"value2": 168,
"label": "Howdy"
}, {
"y": 15,
"x": 4,
"value": 92,
"y2": 13,
"x2": 8,
"value2": 102,
"label": "Hi there"
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": 2,
"x2": 0,
"value2": 41,
"label": "Morning"
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 3,
"value2": 16,
"label": "Afternoon"
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0,
"integersOnly": true,
//"labelRotation": 45,
"labelFunction": function(value) {
// define categories
var cats = [
"Nick",
"Sarah",
"Kevin",
"Dominick",
"Christy",
"Kate",
"Julian",
"Anita",
"Mike",
"Kyle",
"Tyrese"
];
return cats[value];
}
}, {
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "[[label]]",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "[[label]]",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
}],
"legend": {
"switchable": true,
"textClickEnabled": true,
"data": [{
title: "One",
color: "#3366CC",
hidden: true
}, {
title: "Two",
color: "#FFCC33"
}],
"listeners": [{
"event": "clickMarker",
"method": function(event) {
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow()
}
}]
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="clicked">
</div>

Adjusting axis ranges in Amcharts

I would like to make bubble chart like the following using amcharts and I have come across a bubble chart example in amcharts (1). I would like to get some help/guidance on how to make axis range like the sample which I have given below. Any help would be appreciated.
/**
* Plugin: Arrange data pints into separate value "bands"
* Relies on `bandValueScope` being there in the chart config
*/
AmCharts.addInitHandler( function( chart ) {
// check if bandValueScope is set
if ( chart.bandValueScope === undefined )
return;
// iterate through data points and apply step value
for ( var i = 0; i < chart.dataProvider.length; i++ ) {
var add = chart.bandValueScope * i;
for ( var x = 0; x < chart.graphs.length; x++ ) {
chart.dataProvider[ i ][ chart.graphs[ x ].yField ] += add;
}
}
// set up Y axis labelFunction to recalculate those values as well
for ( var i = 0; i < chart.valueAxes.length; i++ ) {
var axis = chart.valueAxes[ i ];
if ( axis.applyBandValues ) {
// set up labelFunction to recalculate labels
axis.labelFunction = function( value, a, b ) {
var newValue = value - Math.floor( value / chart.bandValueScope ) * chart.bandValueScope;
if ( newValue === 0 )
return "";
newValue = newValue.toString();
if ( axis.unit )
newValue += axis.unit;
return newValue;
}
// go through guides and recalculate their values as well
if ( axis.guides && axis.guides.length ) {
for ( var x = 0; x < axis.guides.length; x++ ) {
var add = chart.bandValueScope * x;
var guide = axis.guides[ x ];
if ( guide.value !== undefined )
guide.value += add;
if ( guide.toValue !== undefined )
guide.toValue += add;
}
}
}
}
}, [ "xy" ] );
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 70,
"balloon": {
"fixedPosition": true,
},
/**
* `bandValueScope` is a custom paramater which will be used by a plugin
* to restructure data so that each data point is recalculated into a new
* band
*/
"bandValueScope": 50,
"dataProvider": [ {
// North America
// Home
"x1": 35,
"y1": 30,
"v1": 35,
// Health
"x2": 31,
"y2": 26,
"v2": 35,
// Life
"x3": 21,
"y3": 32,
"v3": 20,
// Long term
"x4": 23,
"y4": 35,
"v4": 29,
// Auto
"x5": 11,
"y5": 33,
"v5": 25,
// Theft
"x6": 10,
"y6": 38,
"v6": 15
}, {
// Asia
// Home
"x1": 50,
"y1": 28,
"v1": 20,
// Health
"x2": 55,
"y2": 25,
"v2": 20,
// Life
"x3": 38,
"y3": 28,
"v3": 20,
// Long term
"x4": 42,
"y4": 32,
"v4": 20,
// Auto
"x5": 25,
"y5": 31,
"v5": 20,
// Theft
"x6": 20,
"y6": 39,
"v6": 20
}, {
// Europe
// Home
"x1": 90,
"y1": 18,
"v1": 100,
// Health
"x2": 85,
"y2": 14,
"v2": 85,
// Life
"x3": 70,
"y3": 29,
"v3": 50,
// Long term
"x4": 80,
"y4": 22,
"v4": 40,
// Auto
"x5": 50,
"y5": 25,
"v5": 40,
// Theft
"x6": 40,
"y6": 35,
"v6": 20
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"title": "Number of Policies Issued",
"titleColor": "#ff7f27",
"titleFontSize": 18,
}, {
"axisAlpha": 0,
"position": "left",
"minimum": 0,
"minVerticalGap": 20,
"unit": "%",
"title": "Avg. Normalized Premiums",
"titleFontSize": 18,
"applyBandValues": true,
"guides": [ {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#00c",
"fillAlpha": 0.1,
"label": "North\nAmerica",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#c00",
"fillAlpha": 0.1,
"label": "Asia",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#0c0",
"fillAlpha": 0.1,
"label": "Europe",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
} ]
} ],
"startDuration": 1.5,
"sequencedAnimation": false,
"legend": {
"position": "right",
"markerType": "circle"
},
"graphs": [ {
"balloonText": "[[title]]: [[value]]",
"title": "Home",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v1",
"xField": "x1",
"yField": "y1",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#a6cf28"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Health",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v2",
"xField": "x2",
"yField": "y2",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#7fadd1"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Life",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v3",
"xField": "x3",
"yField": "y3",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#f9c900"
}, {
"title": "Long term",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v4",
"xField": "x4",
"yField": "y4",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff8a00"
}, {
"title": "Auto",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v5",
"xField": "x5",
"yField": "y5",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff1568"
}, {
"title": "Theft",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v6",
"xField": "x6",
"yField": "y6",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#689494"
} ]
} );
(1.) https://codepen.io/team/amcharts/pen/05584b0b6afd661337b3ce5c8d6a14e3

You could offset both value axes of your bubble chart to center them. However, the offset values are defined in pixels, so unfortunately the axes will not keep their position when the chart is zoomed or panned. So you'll probably have to disable these features in this case.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
// ...
"valueAxes": [{
"position": "bottom",
"offset": -200,
"minimum": 0,
"maximum": 100
}, {
"position": "left",
"offset": -200,
"minimum": 0,
"maximum": 100
}]
});
Here's a Codepen demo: https://codepen.io/team/amcharts/pen/137ecc09f89b5303b66944e4cf278b14?editors=0010.
You could also use minimum and maximum values for both value axes to make it easier to center your axes.
ValueAxis offset: https://docs.amcharts.com/3/javascriptcharts/ValueAxis#offset

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
});
}

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>

AmCharts Legend

I am trying to replicate the following chart
The problem I have is how to make the legend in the left and in the middle of every box that stacks (Series word in each box). I have searched amCharts but no luck. Is there a way to do it or how to override or extend amCharts in order to achieve this behavior?
Thanks a lot.

For displaying value labels, use labelText proeprty.
Just set it to "[[value]]" in your graphs. I.e.:
"graphs": [{
...
"labelText": "[[value]]"
}]
For the "legend" on the left, you will need to use guides. It allows placing lines (optional) and labels at some preset values. You will need to pre-calculate the values at which to place them, though.
Here's a complete working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"year": 2011,
"value1": 13,
"value2": 5,
"value3": 4
}, {
"year": 2012,
"value1": 22,
"value2": 4,
"value3": 5
}, {
"year": 2013,
"value1": 35,
"value2": 7,
"value3": 4
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"tickLength": 0,
"totalText": "[[total]]",
"guides": [{
"value": 6.5,
"label": "Series #1",
"fontSize": 15
}, {
"value": 15.5,
"label": "Series #2",
"fontSize": 15
}, {
"value": 20,
"label": "Series #3",
"fontSize": 15
}]
}],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#a0b1cf",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value1"
}, {
"fillAlphas": 1,
"fillColors": "#c5cde0",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value2"
}, {
"fillAlphas": 1,
"fillColors": "#dde6eb",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value3"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
});
#chartdiv {
width: 400px;
height: 400px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>