Ordering of Donut Series
Posted: 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.
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();
}