Value labels on scatter charts

Comments

15 comments

  • Avatar
    Eli

    Hi Bertrand,

    You can change the value presented by changing the datalabels formatter:

    in the widget script please paste:

    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return this.point.pointText
    }

    })

     

    it will present the point value.

    you can also present all the other values by doing:

    return this.point.x

    return this.point.y

    or return this.point.z // defualt option.

     

    if you have further questions please contact us

     

    0
    Comment actions Permalink
  • Avatar
    miot

    Hi,

    Thank you very much!  I'll try this asap.

    BR,

    Bertrand.

    0
    Comment actions Permalink
  • Avatar
    miot

    Hi there,

    Working as needed.

     

    Txs Again!

     

    Cdlt,

    Bertrand.

     

    0
    Comment actions Permalink
  • Avatar
    Alexander Wong

    Hi,

    I tried Eli's code and it didn't seem to work with

    return this.point.pointText

     

    It worked when I did :

    return this.point.x

     

    Has the nomenclature changed?

    Thanks,

    0
    Comment actions Permalink
  • Avatar
    Alexander Wong

    Hi,

    I figured it out. I had to split my values by "point", not color. Works as needed. 

    Thanks,

    0
    Comment actions Permalink
  • Avatar
    Si Sense

    Is it possible to display the SIZE value instead of the X-AXIS value? I'm not sure which variable to reference in the javascript.

    0
    Comment actions Permalink
  • Avatar
    Alexander Wong

    Hi Si,

    Please try the following:

     

    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return this.point.z
    }

    })

    0
    Comment actions Permalink
  • Avatar
    Si Sense

    Hi Alexander,

    Thanks! That worked. I hadn't tried 'z' as further up in this thread it said that was the default.

    However, it is displaying it without the T/B/M/K formatting. Any ideas if it is possible to get the formatted version or would we have to reformat the value in the script?

    e.g. It is showing 837860000 rather than 837.9M

    Si

    0
    Comment actions Permalink
  • Avatar
    Si Sense

    For now we are formatting the number ourselves:

    function shortenLargeNumber(num, digits) {

    var units = ['K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y'],
    decimal;

    for(var i=units.length-1; i>=0; i--) {
    decimal = Math.pow(1000, i+1);

    if(num <= -decimal || num >= decimal) {
    return +(num / decimal).toFixed(digits) + units[i];
    }
    }

    return num;
    }

    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return shortenLargeNumber(this.point.z)
    }

    })

    0
    Comment actions Permalink
  • Avatar
    David Hertzberg

    Thanks a lot ! That worked for me !!!

    But this should really be a native feature ...

    1
    Comment actions Permalink
  • Avatar
    Ronnie (Edited )
    In order to print the label (of either the Point or Break-by Values) on the bubble itself, please add one of the following scripts:
     
    To print the Point text on the chart:
     
    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return this.point.options.pointText;
    }

    })
     
    ---------------------------------------------------------------------------------------------------
     
    To print the Break By text on the chart:
     

    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return this.point.breakByValue;

    }

    })

     

    Inline image 1

    1
    Comment actions Permalink
  • Avatar
    Alina Lotman (Edited )

    Hi,

    Is there a way I can wrap the text value inside my bubble?

    Thanks!

    Alina

    0
    Comment actions Permalink
  • Avatar
    David Hertzberg

    Hi Alina,

    There are some ways to do this with Javascript, but one of the easiest way would be to define a new short label for your dimension. This would have a better rendering, plus : that would be useful in other cases (even in pivot).

    The problem with word wrapping in bubbles, is that it gets quickly unreadable. Even short labels tend to add some "noise" on the chart. So I usually prefer to use a new column with a short names, and I try to use the same number of letters for each label (usually 4 letters).

    Hope this helps.

    Best,

    1
    Comment actions Permalink
  • Avatar
    Alina Lotman

    Hi David,

    Thank you for your reply!

    In general I agree with the approach of abbreviating the dimensions to have a cleaner chart and better performance overall. However, in this particular case I have a few limitations that prevent me from abbreviating the text. So in this specific case I am looking for a JS script that can do the text wrapping for the text values in the bubbles.

    Thanks,

    Alina

    0
    Comment actions Permalink
  • Avatar
    Dionysios Sarris (Edited )

    Hi, I believe it would be better to post this here instead of creating a new post (but I might as well post a new question).

    I have used the script  provided by Eli (2014)

    --------------------------------------------------------

    widget.on('processresult', function(se,ev){

    ev.result.plotOptions.series.dataLabels.formatter = function(){

    return this.point.pointText
    }

    })

    ---------------------------------------------------------

     

    However my points are coming from timestamps so I end up with the picture seen below. On the actual widget field I have formatted the timestamp as I would like it to show up "MMM-yy"  e.g. "Feb-19". However that is not passed in the javascript. 




    I have thought to maybe try and create another string column with the desired format, as a solution to this, however until I implement that and because it does not feel as the right solution to this, I was hoping if maybe someone with javascript skills could help on this. It seems to me as a format timestamp to the desired output

    FYI: I do not know javascript but I am familiar with other programming languages. I can read and understand parts of it but I would not be able to write my own code.

    0
    Comment actions Permalink

Please sign in to leave a comment.