The Y position of successive Text2 objects, via data points, are different from the first


« 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 Stuart Andrews on 22nd March 2017
Hi Richard,

Have got a Text2 object showing for each data point in a bar graph.

The first Text2 object ypos shows different from the others. Here's an imgur, imgur.com/t2z9wPM.

Here's the code:

$(document).ready(function() {
var graph_MT7G6_Outer = new RGraph.Bar("canvas_V84PI",[3,9,12]);
var graph_MT7G6_Inner = new RGraph.Bar("canvas_V84PI",[5,5,9]);
graph_MT7G6_Outer.Set("chart.gutter.left", 50);
graph_MT7G6_Outer.Set("chart.colors", ["#ddd"]);
graph_MT7G6_Outer.Set("chart.background.grid", false);
graph_MT7G6_Outer.Set("chart.background.grid.vlines", false);
graph_MT7G6_Outer.Set("chart.background.grid.border", false);
graph_MT7G6_Outer.Set("chart.shadow", false);
graph_MT7G6_Outer.Set("chart.ymax", 12);
graph_MT7G6_Outer.Set("chart.ylabels", false);
graph_MT7G6_Outer.Set("chart.noaxes", true);
graph_MT7G6_Inner.Set("chart.grouping", "stacked");
graph_MT7G6_Inner.Set("chart.background.grid", false);
graph_MT7G6_Inner.Set("chart.background.grid.vlines", false);
graph_MT7G6_Inner.Set("chart.background.grid.border", false);
graph_MT7G6_Inner.Set("chart.shadow.offsetx", 1);
graph_MT7G6_Inner.Set("chart.shadow.offsety", 1);
graph_MT7G6_Inner.Set("chart.shadow.blur", 10);
graph_MT7G6_Inner.Set("chart.colors", ["#E80CD8"]);
graph_MT7G6_Inner.Set("chart.gutter.left", 50);
graph_MT7G6_Inner.Set("chart.gutter.bottom", 50);
graph_MT7G6_Inner.Set("chart.hmargin", 20);
graph_MT7G6_Inner.Set("chart.ymax", 12);
graph_MT7G6_Inner.Set("chart.ylabels", false);
graph_MT7G6_Inner.Set("chart.noaxes", true);
graph_MT7G6_Inner.Set("chart.labels.above", true);
graph_MT7G6_Inner.Set("title","Listings Won");
graph_MT7G6_Inner.Set("title.y",10);
graph_MT7G6_Inner.on("draw", function(obj) {
var vTextYPos = 400 - graph_MT7G6_Inner.gutterBottom;
for (var i=0; i < obj.coords.length; i++) {
obj.context.fillStyle="black";
var dataOuter = graph_MT7G6_Outer.data;
var vOuterVal = dataOuter[i];
var text1_MT7G6_Inner = RGraph.Text2(obj.context, {
x: obj.coords[i][0] + (obj.coords[i][2]/2),
y: vTextYPos,
text: obj.data_arr[i].toString() + "/" + vOuterVal,
size: 10,
valign: "center",
halign: "center",
bounding: true,
boundingFill: "white",
marker: false,
angle: 0
});
var rect1_MT7G6_Inner = new RGraph.Drawing.Rect({
id: "canvas_V84PI",
x: text1_MT7G6_Inner.x,
y: text1_MT7G6_Inner.y,
width: text1_MT7G6_Inner.width,
height: text1_MT7G6_Inner.height,
options: {
fillstyle: "rgba(0,0,0,0)",
highlightFill: "rgba(0,0,0,0)",
highlightStroke: "rgba(0,0,0,0)"
}
}).draw();
}
});
var graph_MT7G6_Main = new RGraph.CombinedChart(graph_MT7G6_Outer,graph_MT7G6_Inner);
graph_MT7G6_Main.draw();
});

Any thoughts?
Posted by Richard on 22nd March 2017
Hi,


You could try setting the textAccessible option on both of your objects:

graph_MT7G6_Inner.Set("textAccessible", false);

And also use it in your RGraph.text2 function calls:


// ...
accessible: true,
// ...

PS. Have you heard about whitespace? It's a wonderful thing. :-)

Richard
Posted by Stuart Andrews on 29th March 2017
Thanks Richard! That cleared up the issue.

Yeah, I love whitespace.

The thing is the code is spat out from a different tool compiler, so I'm writing strings etc which are served by the webserver as-is. It's in the right flow/indent in my code, but it comes out flat when served.

Cheers.

Add a reply

 




« Back to message list
RGraph on social media