How to get label index on click in RGraph

Question

I am using RGraph in our angular 7 application. and able to show the 3d graphs and all.

1. I have a requirement to get index when user clicks on x axis labels.

2. Some times not able to update the graph data dynamically.(this issue is producing in when we deploy code in server but as a developer I have to fix it.) please find in the below image.

3. Is it good way to remove and add same 3d graph for every user action so that overlapping will not come again.
4. I need x axis title and y axis title also.

If any one know kindly help me.

Answer 1

1.That's possible for a 2D chart by using two charts - the second positioned over the labels of the first. See this example:

https://codepen.io/rgraph/full/poEJKKm

There's an example of a 3D chart there too with the axes enabled.

<script>
    labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    bar = new RGraph.Bar({
      id:'cvs',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          marginInner: 10,
          xaxisLabels: labels,
          xaxis: false,
          yaxis: false,
          backgroundGridVlines: false,
          backgroundGridBorder: false
      }
    }).draw();

    bar2 = new RGraph.Bar({
      id:'cvs',
      data: [1,1,1,1,1,1,1,1,1,1,1,1],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            marginBottom: 10,
            marginTop: 215,
            colors: ['transparent'],
            variantThreedXaxis: false,
            variantThreedYaxis: false,
            yaxisScale: false,
            tooltips: '\0',
            tooltipsHighlight: false
        }
    }).draw().on('click', function (e, shape)
    {
        alert(shape.dataset);
    });
</script>
    
    
    
    

    bar = new RGraph.Bar({
      id:'cvs2',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          variant: '3d',
          marginInner: 10,
          xaxisLabels: labels
      }
    }).draw();

(Use the "change view" button to see the code)

2. Updating is just a case of setting the new data on the object:

myBar.data = [4,8,6,3,5,4,8,7,8,4,6,9];

And then calling the redraw method:

RGraph.redraw();

If you don't call the redraw method it won't change.

3. If you removing the chart from the ObjectRegistry too and there's not 1000 user actions then I suppose it would be OK. You can clear the ObjectRegistry with:

RGraph.ObjectRegistry.clear();

4. There are properties for that:

https://www.rgraph.net/canvas/bar.html#xaxis-properties https://www.rgraph.net/canvas/bar.html#yaxis-properties

Answer 2

I've been tinkering with this and this code should work on the v5.26 libraries:

<script>

    labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    bar = new RGraph.Bar({
      id:'cvs1',
      data: [8,4,6,3,5,4,2,8,6,4,2,2],
      options: {
          variant: '3d',
          marginInner: 10,
          xaxisLabels: labels,
          backgroundGridVlines: false,
          backgroundGridBorder: false
      }
    }).draw();

    bar2 = new RGraph.Bar({
      id:'cvs1',
      data: [1,1,1,1,1,1,1,1,1,1,1,1],
      options: {
        xaxis: false,
        yaxis: false,
        backgroundGrid: false,
        marginBottom: 10,
        marginTop: 215,
        colors: ['transparent'],
        variantThreedXaxis: false,
        variantThreedYaxis: false,
        yaxisScale: false,
        tooltips: '\0',
        tooltipsHighlight: false
      }
    }).draw().on('click', function (e, shape)
    {
        alert(shape.dataset);
    });
</script>