Two combined bar charts (inner/outer), obj value of one in the other's draw()

« 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 21st March 2017
Hi Richard,

I've got two bar graphs, they're shown using the (awesome) combined graph functionality.

It's an inner/outer situation, where the outer shows the "Target" and the inner shows the "Current Value". Metrics for our users, to see how they are going, that kind of thing.

Am using the Text2 object in the .draw() of the Inner graph, to put a nice white boxed value on display.

What I want to be able to do is get the value of the Outer graph for the same x-axis data point segment from within that code.

Just wondering if this is possible?

Here's the code. Note the text value as a "/12" in it. This is a number pulled out of my own code that builds this html. What would be cool is if I could replace the "12" with the value of the Outer graph data point.


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


Posted by Richard on 21st March 2017

If I understand your code correctly you could use the i variable (where you loop through the coordinates) with the outer charts data array. Something like this:

for (var i=0; i < obj.coords.length; i++) {

     // ...

     var data =;
     var value = data[i];


     // ...


Posted by Stuart Andrews on 22nd March 2017
Fantastic, thanks Richard, worked like a charm!

Add a reply

« Back to message list