duplicate (non-rotated) tick labels also being shown

[mhl]

I'm seeing the following odd effect when using flot-tickrotor, where the rotated labels are being shown properly, but I'm also seeing non-rotated labels:

This is using the following versions of related libraries, included in this order:

• flot 0.8.1
• flot.errorbars (from flot 0.8.1)
• flot-tickrotor 162d57012f0f4
• flot-axislabels markrcote/flot-axislabels@fcfde41709057b108728

With the following options object:

{
    "series": {
        "lines": {
            "show": false
        }
    }, 
    "xaxes": [
        {
            "axisLabel": "Public Bodies", 
            "axisLabelColour": "black", 
            "axisLabelPadding": 20
        }
    ], 
    "xaxis": {
        "rotateTicks": 90, 
        "ticks": [
            [0, "Department of Loneliness"], 
            [1, "Another Public Body"], 
            [2, "Geraldine Quango"], 
            [3, "Department for Humpadinking"], 
            [4, "Ministry of Sensible Walks"], 
            [5, "Ministry of Silly Walks"], 
            [6, "Bonus Authority 1"], 
            [7, "Bonus Authority 2"], 
            [8, "Bonus Authority 3"], 
            [9, "Bonus Authority 4"]
        ]
    }, 
    "yaxes": [
        {
            "axisLabel": "Percentage of total requests", 
            "axisLabelColour": "black", 
            "axisLabelPadding": 20
        }
    ], 
    "yaxis": {
        "max": 100, 
        "min": 0
    }
}

Am I doing something or is this a bug? Is there some workaround, in any case?

[gkasparek]

I see the same behavior. For now I just added this to the page:

div.xAxis div.tickLabel { display:none }

However, I also wanted to use the bar graphic with the canvas plugin (jquery.flot.canvas.js). When I include the canvas plugin, the rotated labels look great still, but the fix above does not work -- the extra copy of the tick labels show up again.

[ampz9]

@gkasparek try the following as a work around:

$(".flot-x-axis.flot-x1-axis.xAxis.x1Axis").find($(".flot-tick-label.tickLabel")).hide()

[gkasparek]

Mark,

Thanks for your response, and for your excellent plugins. I think I see what you are trying to do here, namely, hide the original HTML version of the x-axis labels. However, the extra copy of these labels appear to be within the canvas element. Therefore the above fix doesn't hide it.

Please let me know whether seeing sample might help.

[markrcote]

Sorry I have not had time to properly investigate this. I looked into it a bit, but it was related to some extensive changes in the flot core. I will try to find some time to dig further.

[gkasparek]

Mark,

Again, I appreciate your effort, regardless of when you get to it! However, I am hoping to get this thing working quickly. I want to try to use this solution in a production app. Maybe I can help a bit?

I've put a sample here: http://webpragma.com/tmp/flot_axis.html

Do you have any suggestions on how I might modify either your plug-in or the other ones (canvas?) to fix this? I'm guessing that canvas just takes all the elements in the flot labels overlay div and converts them ....? Just not sure what happens after that.

[ampz9]

The code that I provided is working for me. The options I used are below and then on ready I ran that js code...

var options = { grid: { hoverable: true, clickable: true }, xaxis: { show: true, rotateTicks: 135, ticks: ticks }, series: { bars: { show: true, barWidth: 0.5, align: \"center\" }, stack: true }, legend: { show: true, labelBoxBorderColor: \"black\", noColumns: 2, position: \"ne\" } };

[gkasparek]

Maybe I ran that line in the wrong location. I added it right at the end, after generating the flot chart. But now that I think about it, that hardly makes sense because by then the canvas element is complete. Did you add it before (which doesn't really make sense to me either) or somewhere in the flot or plug-in code?

On Fri, Aug 30, 2013 at 9:19 AM, ampz9 notifications@github.com wrote:

The code that I provided is working for me. The options I used are below and then on ready I ran that js code...

var options = { grid: { hoverable: true, clickable: true }, xaxis: { show: true, rotateTicks: 135, ticks: ticks }, series: { bars: { show: true, barWidth: 0.5, align: \"center\" }, stack: true }, legend: { show: true, labelBoxBorderColor: \"black\", noColumns: 2, position: \"ne\" } };

— Reply to this email directly or view it on GitHubhttps://github.com/markrcote/flot-tickrotor/issues/7#issuecomment-23572514 .

Gil Kasparek gil@allnight.com

[markrcote]

Wait, is this the same as issue #5? Can you try using flot master? I committed a fix for that issue on July 19; this sounds like the same thing.

[markrcote]

Yeah, I just confirmed that the sample that gkasparek put up works fine with the very latest flot. DNS says that flot 0.8.2 will contain my fix and be released soon. Sorry for not realizing that this was the same issue; I think I was confusing this issue with another. :)

[gkasparek]

Thanks for calling my attention to this fix. I too am really sorry for wasting your time -- I'm a bit new to using a library in alpha phase, and don't really know how to search for existing bugs.