ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  circular progress bar
Posted by Cho on May-17-2018 16:21
Hi,

I want to create a circular progress bar like the one below in the MFC version.

https://www.npmjs.com/package/circle-progress-bar
(http://nikitchenko.ru/circle-progress-bar/)

Gradation is not required. It can be expressed in a single color.
Is it possible with ChartDirector?
If yes, please give a simple example.

Thanks & Regards
Cho

  Re: circular progress bar
Posted by Peter Kwan on May-18-2018 02:17
Attachments:
Hi Cho,

I happened to have a similar example as show below. It is basically a donut chart with some custom drawings. May be you can start from that example and modify the colors, size of the donut and the text to achieve what you need.


double angles[] = { 270, 90 }; // must sum to 360
int colors[] = { 0xA00060, 0x3f0025 };

// Chart object size
int midRadius = 80;
int halfRingWidth = 20;
int chartWidth = (midRadius + halfRingWidth + 10) * 2;
int chartHeight = chartWidth;
int cX = chartWidth / 2;
int cY = chartHeight / 2;

// Donut chart
PieChart *c = new PieChart(chartWidth, chartHeight, 0x004060);
c->setDonutSize(cX, cY, midRadius + halfRingWidth, midRadius - halfRingWidth);
c->setData(DoubleArray(angles, 2));
c->setLabelFormat(" ");
c->setColors(Chart::DataColor, colors);

// DrawArea for drawing extra objects
DrawArea *d = c->makeChart();

// Add two circles at the end points of the donut sector
d->circle(cX, cY - midRadius, halfRingWidth, halfRingWidth, colors[0], colors[0]);
double endX = cX + midRadius * sin(angles[0] * 3.1416 / 180);
double endY = cY - midRadius * cos(angles[0] * 3.1416 / 180);
d->circle(endX, endY, halfRingWidth, halfRingWidth, colors[0], colors[0]);

// Add the circle and the label in the center
d->circle(cX, cY, 40, 40, 0xEEEEEE, 0xEEEEEE);
c->addText(cX, cY, "3", "arialbd.ttf", 40, colors[0], Chart::Center);

c->makeChart("test.png");

Hope this can help.

Regards
Peter Kwan
test.png

  Re: circular progress bar
Posted by Cho on May-18-2018 08:25
Hi,

It has been a great example for me.
Thank you very much.

Regards,

Cho