Ordering of Donut Series

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
PhatFingers
Newbie
Newbie
Posts: 3
Joined: Tue Mar 05, 2019 12:00 am

Ordering of Donut Series

Post by PhatFingers » Sat Mar 16, 2019 5:28 pm

Hey, all. I'm trying to replace a chart from a different package written in Flash. It's essentially a partial donut chart that I will eventually overlay with a gauge needle. I'm currently working on the donut chart portion. My goal is to have an arc with three colors, green, yellow, and red, which, left-to-right, will represent 20%, 60%, 20% of the portions of that arc. I also want those percentages to be variable, so a static background image is undesirable.

Where I'm running into trouble, is that the series seems to be automatically sorted, such that my [20,60,20] is rendered as though it were [20,20,60]. Furthermore, the technique I'm using to turn the circle into an arc is to add an additional segment and explode it from the series. It works nicely from a visual perspective, but also is impacted by that automatic sorting. So, in actuality, it's sorting [20,60,20,50] as [20,20,50,60], moving the exploded piece into the 3rd position. If the ratios vary to, say [30,40,30,50], then it will sort it as [30,30,40,50], moving the exploded piece to the 4th position, requiring a different rotation.

Is there a way to prevent the automatic sorting of the series?

Here's the basic working part of the code.

Code: Select all

var Chart1;
function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Donut([20,60,20,50]));
  Chart1.series.items[0].rotation=245;
  Chart1.series.items[0].explode=[0,0,0,1000];
  Chart1.series.items[0].marks.visible=false;
  Chart1.title.text="";
  Chart1.legend.visible=false;
  Chart1.draw();
}

PhatFingers
Newbie
Newbie
Posts: 3
Joined: Tue Mar 05, 2019 12:00 am

Re: Ordering of Donut Series

Post by PhatFingers » Sat Mar 16, 2019 8:27 pm

I was able to trace through the source code and find a solution.

Code: Select all

Series1=new Tee.Donut([20,60,20,50]);
Series1.sort="none";
Chart1.addSeries(Series1);

Post Reply