CODEWITHSUNDEEP
fluttergridlinessyncfusion-chart
Moin Hashmi
Moin Hashmi

Reputation: 61

Flutter 270 degree radial chart

I am looking for the following chart in flutter:

enter image description here

Can anyone provide me any solution?

Upvotes: 2

Views: 204

Answers (2)

Asad Waseem
Asad Waseem

Reputation: 44

Great Effort thanks am waiting for this from a long time

Upvotes: 0

Moin Hashmi
Moin Hashmi

Reputation: 61

//First get X,Y Center and radius

double centerX = width / 2;
double centerY = height / 2;
double radius = width / 2;

const numberOfIntervals=5;

//create axis lines

var axisLinePaint = Paint()
  ..color = viewPortBorderColor
  ..style = PaintingStyle.stroke
  ..strokeWidth=1; 

//Gridline Paint

var gridlinePaint = Paint()
  ..color = gridColor
  ..strokeWidth = 0.6
  ..style = PaintingStyle.fill;

canvas.drawArc(Rect.fromLTRB(0, 0, width, height),
    getRadiansByAngle(-90), getRadiansByAngle(270), true, axisLinePaint);

// Get gap between intervals

int gap=270~/numberOfIntervals;

now creating gridlines:

for (var i = gap; i <= 270; i += gap) {
  var thetaAngle = 0;
  label=label+(maxVal~/numberOfIntervals);

  if (i <= 90) {
    thetaAngle = 270 + i;
  } else {
    thetaAngle = i - 90;
  }

  var theta = thetaAngle * (pi / 180);
  var offSet=Offset(centerX + radius * cos(theta), centerY + radius * sin(theta));

  canvas.drawLine(
      offSet,
      Offset(centerX, centerY),
      gridlinePaint);
}

for radian angle:

double getRadiansByAngle(double angle) {
  return (angle * pi / 180);
}

Here is full solution:

https://github.com/MoinHashmi/radial_chart_gridlines

If anyone have another suggestion or solution please post.

Upvotes: 2

Related Questions