Resize graph in panel

Grafana Plugin Development
1

For my plugin, I am drawing a graph in a panel using CanvasJS. The graph is drawn in a <div> element with the id ‘chartContainer’. I am trying to make sure that the size of the graph adjusts if the size of the panel is adjusted. However, this works with the width, but not with the height. I am doing it like this:
The function loadGraph() is called whenever the panel is initialized.

loadGraph() { 
    this.chart = new CanvasJS.Chart("chartContainer", {
      backgroundColor: "#1f1d1d", 
      height: this.$element.parent().innerHeight()- 40, 
      width: this.$element.parent().innerWidth() - 40, 
      axisY: {
        includeZero: false
      },
      data: [{
        type: "scatter",
        dataPoints: this.dps
      }, { type: "line", dataPoints: this.curveData }]
    });
    this.chart.render();
  }

The function onRender() is called whenever the ‘render’ event takes place.

onRender() {
    console.log("onRender is called");
    console.log('height is: ', this.$element.parent().innerHeight());
    console.log('width is: ', this.$element.parent().innerWidth());

    this.chart = new CanvasJS.Chart("chartContainer", {
      backgroundColor: "#1f1d1d", 
      height: this.$element.parent().innerHeight()- 40, 
      width: this.$element.parent().innerWidth() - 40, 
      axisY: {
        includeZero: false
      },
      data: [{
        type: "scatter",
        dataPoints: this.dps
      }, { type: "line", dataPoints: this.curveData }]
    });
    this.chart.render();
  }

As you can see, the way I set the height is identical to the way I set the width. However, this works only for the width, the height does not adjust (in the picture below, you can see that the heigth of the graph (P-V curve) is much more than the height of the panel). Capture
Does anyone know how to fix this? Thanks in advance!

2

use ctrl.height instead (the on panel ctrl)

3

Hi Torkel,

Thank you very much for your reply! I have tried multiple ways of using ctrl.height, but it doesn’t seem to work. First of all, I tried adjusting the <div> element like this:
<div id="chartContainer" ng-style="{height: ctrl.height}"></div>

As that did not work, I tried defining this.ctrl in the constructor like this:

class ClockCtrl extends MetricsPanelCtrl {
constructor($scope, $injector, $element) {
super($scope, $injector);
this.$element = $element;
this.ctrl = ctrl;
//there is some other stuff in here that is irrelevant
}

and then, in the function loadGraph() and onRender() I tried setting the height like this:

this.chart = new CanvasJS.Chart(“chartContainer”, {
backgroundColor: “#1f1d1d”,
height: ctrl.height,
axisY: {
includeZero: false
},
data: [{
type: “scatter”,
dataPoints: this.dps
}, { type: “line”, dataPoints: this.curveData }]
});

However, this also does not work. My graph now looks like this:

graph2
graph2869×819 23.6 KB

So the height of the graph is the same as the panel height, but now I cannot change the height. Also, the height of this panel is not the same as the height of the panels next to it (you can see that on the right side).

Do you know what the problem is here and how I could possibly fix it?

Thanks in advance!

4

not sure what could be wrong, works for all other panels.