Add additional column in SVG rgraph to display values of bar graph

Question

I have a hbar bar looking like:

I wanted to add additional column at the end to display bar values. I want to add 2 columns to display number 2 and 3 on the first row.

I want my graph to look like this:

I tried to append in the svg but It is not showing.

What is the proper way to dynamically add additional Columns in rgraph for SG?

FYI

I added the columns using jquery

data = obj.data;

$.each(obj.properties.yaxisLabels, function(i, v) {
  var nodes = RGraph.SVG.text.find({
    object: obj,
    text: v
  });
  RGraph.SVG.text({
    object: obj,
    parent: obj.svg,
    text: Math.round(data[i][0]),
    x: +$(nodes).attr('x') + obj.graphWidth + 8,
    y: $(nodes).attr('y'),
    halign: 'left',
    valign: 'center',
    // background: '#FFDE00',
    size: 12,
    // padding: 1,
    color: 'black',
    // color:  '#999'
  });
  RGraph.SVG.text({
    object: obj,
    parent: obj.svg,
    text: Math.round(data[i][1]),
    x: +$(nodes).attr('x') + obj.graphWidth + 23,
    y: $(nodes).attr('y'),
    halign: 'left',
    valign: 'center',
    // background: '#097054',
    backgroundGridVlines: true,
    backgroundGridBorder: true,
    size: 12,
    color: 'black'
    // padding: 1,
    // color:  '#999'
  });
})

Are the red and green boxes just for highlighting purposes? Or do you want those on the chart as well? If it's just the text that you want you can use the RGraph.SVG.text(); function. For an example of using the RGaph.SVG.Text() function see the source code of this page: https://www.rgraph.net/demos/svg-pie-dashboard.html — Richard, Nov 07 '18 at 17:35
@Richard its to highlight only. But I also want a grid if possible.. Ill check the link now and see if it works — guradio, Nov 07 '18 at 23:15
I cant get/dont know how to get the height, x position and y position for each row so I can position the text on the last column for each row — guradio, Nov 07 '18 at 23:52
I want to make the additional column appear like its part of the table @Richard — guradio, Nov 08 '18 at 04:15
@Richard is also possible to download the generated SVG chart as PDF ? — guradio, Nov 08 '18 at 07:39

score 1 · Accepted Answer · answered Nov 08 '18 at 16:42

Something like this then:

var hbar = new RGraph.SVG.HBar({
    id: 'cc',
    data: [[2,3],[1,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    options: {
        yaxisLabels: ['Abc','Def','Ghi','Jkl','Mno','Pqr','Stu','Vwx','Yz','nuj'],
        xaxis: false,
        yaxis: false,
        colors: ['yellow','green'],
        gutterLeft: 50,
        gutterLeftAutosize: false,
        gutterRight: 75
    }
}).grow();

// Add the text that gives the percentages
for (var i=0; i<hbar.coords.length; ++i) {

    var value = hbar.coords[i].element.getAttribute('data-value'),
        y     = (i % 2 === 0) ? hbar.coords[i].y + hbar.coords[i].height + 5 : y,
        x     = (i % 2 === 0) ? hbar.width - hbar.properties.gutterRight + 10 : x + 35;

    RGraph.SVG.text({
        object: hbar,
        text: value + '%',
        x: x,
        y: y,
        color: 'black',
        halign: 'left',
        valign: 'center',
        size: 12
    });
}

really awesome mate.. I added what I tried it is so messed up this solution is very good and clean..happy coding and more power to rgraph..also if possible can you add some explanation on each so i see and know my mistakes. — guradio, Nov 08 '18 at 23:26

Add additional column in SVG rgraph to display values of bar graph

1 Answers1