Rgraph redimension drilldown canvas

Question

I have a HBar chart with drill down. The first chart as a height of 6.000, but the drilldown should be much small,about 400px, but I can only draw the second one in the same canvas, with te same height. Is it possible to redimension the canvas when I click one of the bars?

<canvas id="<?php echo $Geocanvas; ?>" width="900" height="6000" style="border: 1px solid #ddd">[No canvas support]</canvas>


<script>
    window.onload = function ()
    {
    var ca = document.getElementById("<?php echo $Geocanvas; ?>");
    var data = <?php echo $data; ?>;
    var labels =<?php echo $labels; ?>;
    var YMax =<?php echo $YMax; ?>;
    var Geocanvas =<?php echo $Geocanvas; ?>;

    var data_drilldown = [<?php echo implode(',', $data_drill) ?>];
    var labels_drilldown = [<?php echo implode(',', $labels_drill) ?>];

    var bar = DrawMainChart();

        /**
        * Draws the main chart
        */
        function DrawMainChart ()
        {
        RGraph.Reset(ca);

        var bar = new RGraph.HBar(Geocanvas, data)
            .Set('labels', labels)
            .Set('bevel', true)
            .Set('grouping', 'stacked')
            .Set('ymax', YMax)
            .Set('shadow', true)
            .Set('shadow.color', ['#3897c5'])
            .Set('shadow.offsety', 0)
            .Draw();
            bar.onclick = function (e, shape)
            {
                var obj = e.target.__object__;
                var ca  = obj.canvas;
                var idx = shape.index;

                /**
                * Slide the old bar out
                */
                RGraph.Effects.Fade.Out(obj, null, function ()
                {
                    RGraph.Reset(ca);

                    var bar = new RGraph.Bar(Geocanvas, data_drilldown[idx])
                        .Set('labels', labels_drilldown[idx])
            ;

                    RGraph.Effects.Fade.In(obj);
                });
            }

            /**
            * The onmousemove event to change the cursor
            */
            bar.onmousemove = function (e, shape)
            {
                e.target.style.cursor = 'pointer';
            }

            return bar;
        }

        document.getElementById("butBack").onclick = function (e)
        {
            var obj = ca.__object__;

            RGraph.Effects.Fade.Out(obj,null,function ()
            {
                var bar = DrawMainChart();

                RGraph.Effects.Fade.In(bar);
            });
        }
    }
</script>

Richard · Answer 1 · 2020-08-15T15:37:51.983

You can re-dimension the canvas if you want by setting the gutter settings when you create the new chart:

var bar = new RGraph.Bar(Geocanvas, data_drilldown[idx])
    .Set('labels', labels_drilldown[idx])
    .Set('gutter.left', 200)
    .Set('gutter.right', 50)
    .Set('gutter.top', 50)
    .Set('gutter.bottom', 50)

Alternatively you could use tooltips to show a new chart like the bar-pie-charts-tooltips.html demo in the download archive (which you can get here: https://www.rgraph.net/download.html#stable ).

Another way would be to use the tooltips.override option to run your own code when a tooltip is shown. Your code could then create a new canvas and show the new chart.

Rgraph redimension drilldown canvas

1 Answers1