My Line charts labels aren't positioned correctly


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Andre on 23rd October 2017
I'm trying to update to the latest 4.6 release, and one of my line graphs seems to be giving a label position problem. You can see the effect here:
imgur.com/a/hTkts

Each of the spans in HTML are given this style: position: absolute; display: inline; left: 0px; top: 0px;

The graph is also in a Bootstrap popup window, though I have tried to delay it's loading until after the window is shown, but doesn't seem to make a difference. Another issue is that the 2nd time this same window is closed/opened, the labels don't show up at all.

Actual code:
[code]
var gutterLeft = 100;
var gutterRight = 40;
var gutterTop = 25;
var gutterBottom = 50;

var resultData = [9, 10, 15, 8, 9, 14, 12, 12, 12, 13, 13, 6];
var tempData = [48, 48, 48, 65, 75, 78, 82, 68, 72, 84, 87, 82.4];
var tableLabels = ["12", "11", "10", "9", "8", "7", "6", "5", "4", "3", "2", "1"];

  var line1 = new RGraph.Line({
                 id:'cvs',
                 data: resultData,
                 options: {
                     hmargin: 5,
                     labels: tableLabels,
                     tooltips: tableLabels,
                     ymin: actualMin,
                     ymax: actualMax,
                     gutter:{
                         top: gutterTop,
                         left: gutterLeft,
                         right: gutterRight,
                         bottom: gutterBottom
                     },
                     linewidth: 5,
                     colors: ['green'],
                     noaxes: true,
                     ylabels: false,
                     backgroundHbars: hBarArray
                 }
             }).draw();

             var line2 = new RGraph.Line({
                 id:'cvs',
                 data: tempData,
                 options: {
                     hmargin: 5,
                     labels: tableLabels,
                     tooltips: tableLabels,
                     ymin: tempMin,
                     ymax: tempMax,
                     gutter:{
                         top: gutterTop,
                         left: gutterLeft,
                         right: gutterRight,
                         bottom: gutterBottom
                     },
                     linewidth: 2,
                     colors: ['red'],
                     noaxes: true,
                     ylabels: false,
                     background: {
                         grid: false
                     }
                 }
             }).draw();
            

             var yaxis1 = new RGraph.Drawing.YAxis({
                 id:'cvsQuestHistLine',
                 x: gutterLeft,
                 options: {
                     title: 'Result',
                     min: line1.scale2.min,
                     max: line1.scale2.max,
                     colors: ['green']
                 }
             }).draw();

             var yaxis2 = new RGraph.Drawing.YAxis({
                 id:'cvs',
                 x: gutterLeft * 0.5,
                 options: {
                     title: 'Ambient Temperature',
                     min: line2.scale2.min,
                     max: line2.scale2.max,
                     colors: ['red']
                 }
             }).draw();
[/code]
Posted by Richard on 23rd October 2017
Hi there,

There aren't any labels on that chart at all. If that's the issue then perhaps your Bootstrap popup has some CSS applied to it that is interfering the RGraph SPAN tags.

So your could try not using the default method for labels so turn it off. Add this to your configuration:

textAccessible: false

Now I think about it it's making more sense because the vertical text (which does not use the accessible option) is appearing.

Richard
Posted by Andre on 23rd October 2017
Labels are listed in this variable, they are just an array of a sequence number:
var tableLabels = ["12", "11", "10", "9", "8", "7", "6", "5", "4", "3", "2", "1"];

Also if you notice, the labels for the Y-axis are having the same problem and stacked up.

I don't think there's conflicting CSS, since the above mentioned style looks to be applied by javascript by the library:
position: absolute; display: inline; left: 0px; top: 0px;

Everything has that same absolute and left/top being 0, that is why they are all stacked up.

I did try the suggested:

textAccessible: false

And added it to every option, it looks like it worked! I'm not sure why, but much appreciated!

Add a reply




« Back to message list