1

I have managed to get this if statement to run the first part, but it will not run the else if bit correctly. I must be placing something incorrectly because it only shows (Not Designated) on the xAxis. Wondering why the else if part is not working.

labels: {
    formatter: function() {
        // custom formatter
        if (this.x == null) { return "(Not Designated)";

        } else if (this.x != null ) {

            return this.x;
        }                      
},

It must have something to do with how I am getting the data then, because my original if statement was like this...

if (this.x == null) return '(Not Designated)';

else return this.x;

If I use the "===" setup it does not show the (not designated) or any xAxis values, if I use the "==" it will show the (not designated) for all xAxis items. I understand that it is a really simple function to do this, but its not working and it either has something to do with Highcharts formatter or the data I am trying to gather. I have not dealt with null values much either so sorry for the bad markup examples...thanks for the comments!

UX.DevDude
  • 185
  • 3
  • 14
  • 2
    try using "===" for equality match. you can also code this in one line like "return this.x || '(Not Desginated)';" – Sumit Surana Feb 18 '16 at 16:50
  • I tried that after looking at some other threads, just tried it again and it shows no xAxis values with the "===" equal to setup. Thanks for the one line example, will help me out for sure. Very odd because the tooltip has the same basic formatter piece and it works fine. – UX.DevDude Feb 18 '16 at 16:59
  • 1
    I second @Sumit 's comment. But to address the initial set up - why would you bother with an if else anyway? You're checking whether 'this.x' *is* something with your if statement - you don't need to then check if 'this.x' is *not* that same thing, you could just use an 'else'. Which is basically what the one line solution is shorthand for. – jlbriggs Feb 18 '16 at 19:36
  • 1
    is it possible that you should be comparing against `undefined` rather than `null`? – Eric Phillips Feb 18 '16 at 20:54
  • Anything is possible at this point, I will have to show this to our main programmer because I think it has to do with the actual database itself. I will post my solution once it is finalized, thanks again. – UX.DevDude Feb 18 '16 at 21:10
  • 1
    can you provide the whole function please, If it returns `"(Not Designated)"`. That's mean that this.x is null. You can set a breakpoint there and see by yourself – IsraGab Feb 18 '16 at 21:29
  • Here is a [fiddle](http://jsfiddle.net/uxdeveloperkr/th0x3h8k/) of something similar, I am working on a test server that is not accessible on stack overflow so this will have to do. – UX.DevDude Feb 18 '16 at 22:08
  • 1
    In the fiddle you provided, you forgot to encapsulate formatter into labels{}. It's working pretty good with `this.value`, instead of `this.x` – IsraGab Feb 18 '16 at 23:09

3 Answers3

2

When I check this.x using debugger it looks like undefined: enter image description here

I replace "this.x" by "this.value", the chart is working. Here is the jsfiddle.

  if (this.value == 0) {
    return '(Not Designated)';

  } else if (this.value != 0) {

    return this.value;
  }

It will be great if you can share the categories that you are using!

mustapha mekhatria
  • 3,495
  • 1
  • 20
  • 26
  • That worked for the xAxis, I now have this under control for both the data labels (my answer below) and the xAxis labels. I can post a link to the live charts when I am finished. – UX.DevDude Feb 18 '16 at 23:26
1

First of all, in the fiddle you gave, the formatter function wasn't encapsulated into labels property.

labels: {
            formatter: function() {

         if (this.value == 0) {return '(Not Designated)';}
         else {return this.value;}
        },
        },
        },

There were also 2 other problems:

  1. this.x is undefined, so checking with === won't show the x-axis because this operator will check if values are strictly equals (more info here). since undefined is undefined, you can't check for its value.
  2. When you have null into a category name, highcharts will replace it with its index, so that's why even with == it wasn't working.

I suggest to replace the null by a 0 and the this.x by this.value. Here's your working Fiddle.

Community
  • 1
  • 1
IsraGab
  • 4,819
  • 3
  • 27
  • 46
  • I ended up changing to the dataLabels because I couldn't get the other stuff to work. I guess more understanding of how the data comes across is helpful eh, thanks for helping a newbie with bad examples! I was so confused about the null values coming back as numbers, now I understand why that is happening. Seems so simple now. – UX.DevDude Feb 18 '16 at 23:38
0

Here is what I ended up with in the end, took me a while but glad that this handles all null values and all blank values, in case any of you have a similar issue with your database.

// format the xAxis labels to handle null and blank values from database
 formatter: function() {
   if (this.x === null) {
   return "(Not Designated)" + '<br>' + '$' + Highcharts.numberFormat(this.y, 0);
    } else if (this.x === '') {
      return "(Not Designated)" + '<br>' + '$' + Highcharts.numberFormat(this.y, 0);
 }
   return this.x + ' ' + '$' + Highcharts.numberFormat(this.y, 0);
}
UX.DevDude
  • 185
  • 3
  • 14
  • [Here](http://www.followthemoney.org/entity-details?eid=16039) is the finished column chart. Now, if I could only get the dang thing to actually be responsive that would be nice but maybe not possible with a non responsive site... – UX.DevDude Feb 19 '16 at 17:51