0

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?

threeFatCat
  • 840
  • 13
  • 30

1 Answers1

0

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.

AnyChart Support
  • 3,770
  • 1
  • 10
  • 16
  • Hi there! that is what I thought also, when testing the drawing function when I was testing it out, that it is due to some calculations it causes it to concave, the modified sample still is showing concave progress: https://snipboard.io/Cn2GkI.jpg on my end. Also I quick search your answer but I can't find anywhere in the API documentation about `tag` property. Anyway I have already abandoned for now using round corners due to deadlines. – threeFatCat Mar 09 '20 at 09:52
  • The API Reference describes only namespaces, classes, function and methods. It doesn't include properties. But we do our best to include everything users may need to the event callback context. – AnyChart Support Mar 09 '20 at 10:10