Search code examples
javascriptanychartanychart-8.2

How to access data passed within a function in AnyChartJS?

I'm trying to change my Gantt chart tasks bar to rounded corners.

Following this tutorial here. But this sample doesn't have modifications for progress bars, so I used the method progress() to access progress bars and added this:

tasks.progress().rendering().drawer(drawingFunction)

I noticed that if I apply the rounded corners, to data with zero progressValue, it shows the progress bars with concave corners, which progress should not be visible at all or at least convex corners (possible bug):

enter image description here

Now as workaround, I'm thinking to add validation for progressValue = 0 and move it from there, but then to the question how do I get the value of progressValue inside drawingFunction()?

// a function for drawing custom elements
var drawingFunction = function () {

  // get the shapes of the element
  var shapes = this["shapes"];
  // get the shape to be modified
  var path = shapes["path"];
  // get the bounds of the element
  var bounds = this["predictedBounds"];

  var h = bounds.height;
  var t = bounds.top;
  var l = bounds.left;
  var r = bounds.left + bounds.width;
  var h1 = bounds.top + bounds.height;    
  var h4 = h / 4;
  var h2 = h / 2;

  // draw a rounded rectangle
  path.moveTo(l + h4, h1 - h4)
  path.arcTo(h4, h4, -270, 180)
  path.lineTo(r - h4, t + h4)
  path.arcTo(h4, h4, -90, 180)
  path.lineTo(l + h2, h1 - h4)
  path.close(); 

}

What I tried:

  • Passing a parameter in the drawingFunction and accessing it using: myparameter.item.na.progressValue. This works but it's kind a dirty hack.
  • Tried this.value, this.getValue('progressValue'), this.getValue('value'). But got nothing.

Is there any like global method to access the data anywhere?

Solution

  • In the drawingFunction() you can get the required value like this:

    this.tag.item.get('progressValue')

    For details, check the modified sample.

    There's no bug with the drawing function. You get the bars with concave corners because the bar width is less than 2x corner radius. You have to reduce the radius or somehow handle the situation when the progress value is quite small.