CODEWITHSUNDEEP
amcharts
Mari
Mari

Reputation: 39

Positioning an individual label on a scatter plot in AMcharts

good day

I hope someone can help me. I created a scatter plot on AMcharts and each data point has its own label, but as soon as I put in more data the labels over flow. I have tried positioning each label individually, but I cant seem to get it right. I also tried using a labelFunction to change the position of an individual data point, but I'm not sure I'm doing it right. Can someone please help me.

I'm really struggling with this thing.

javaScript

var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"theme": "none",
"dataProvider": [{
    "y": 10,
    "x": 14,
    "value": 59,
    "y2": -5,
    "x2": -3,
    "value2": 44
}, {
    "y": 5,
    "x": 3,
    "value": 50,
    "y2": -15,
    "x2": -8,
    "value2": 12
}, {
    "y": -10,
    "x": 8,
    "value": 19,
    "y2": -4,
    "x2": 6,
    "value2": 35
}, {
    "y": -6,
    "x": 5,
    "value": 65,
    "y2": -5,
    "x2": -6,
    "value2": 168
}, {
    "y": 15,
    "x": -4,
    "value": 92,
    "y2": -10,
    "x2": -8,
    "value2": 102
}, {
    "y": 13,
    "x": 1,
    "value": 8,
    "y2": -2,
    "x2": 0,
    "value2": 41
}, {
    "y": 1,
    "x": 6,
    "value": 35,
    "y2": 0,
    "x2": -3,
    "value2": 16
}],
"valueAxes": [{
    "position":"bottom",
    "axisAlpha": 0
}, {
    "minMaxMultiplier": 1.2,
    "axisAlpha": 0,
    "position": "left"
}],
"graphs": [{
    "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]     </b>",
    "bullet": "circle",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.8,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value",
    "xField": "x",
    "yField": "y",
    "maxBulletSize": 100,
    "labelText": "[[x]]",
    "labelFunction": function(obj,label) {
        setTimeout(function() {
            console.log(obj.bulletGraphics.node.nextElementSibling);
        },100); // delay to generate the element
        return label;
    }
}, {
    "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
    "bullet": "diamond",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.8,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value2",
    "xField": "x2",
    "yField": "y2",
    "maxBulletSize": 100
}],
"marginLeft": 46,
"marginBottom": 35

});

Upvotes: 2

Views: 1041

Answers (1)

gerric
gerric

Reputation: 2297

Ok so what i got for you is this Fiddle.
It uses the labelFunction to move the label. As labelFunction returns a blank string you have to do this with \u00a0 (space) or \n (new line). So the function checks, if the previous(!) point has the same(!) coordinates.
You could modify it to check the whole dataset and see if any datapoint is near.
I hope you can work with this. :)

Upvotes: 1

Related Questions