Accumulation Charts Donuts

[wissem khaled]

Hello, I have a problem in your documentation for the Angular part. I'm trying to make Donut Accumulation Charts Stacked like this example: https://ej2.syncfusion.com/showcase/angular/healthtracker/src/#/dashboard
(the one when you press the Steps Taken button).

But I can't find documentation or examples on Starblitz that allow me to reproduce these overlapping donuts. Do you have a solution for me ?

[Baby Palanidurai]

Hi Wissem, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We are achieving multiple donut by using annotations in the accumulation charts. For more information about annotations, kindly find the below documentation link, 

https://ej2.syncfusion.com/angular/documentation/accumulation-chart/annotation/?no-cache=1 

 

Sample link: https://stackblitz.com/edit/angular-xox5ca-gpl8vw?file=app.component.ts 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[wissem khaled]

Thank you for your answer but I see that in HTML, you make circles which overlap towards the interior. Is it possible to have the circles encompass on the first generated via <e-accumulation-series>?

You write "hard" the circles in addition, but my data is generated dynamically (I don't know in advance how many circles I would have to add), is it also possible to generate this dynamically with their height and their width not written directly in HTML?

Thanks for your time.

[Baby Palanidurai]

Hi Wissem, 

 

Thanks for your update. 

 

Please find the below response for your queries. 

 

I see that in HTML, you make circles which overlap towards the interior. Is it possible to have the circles encompass on the first generated via <e-accumulation-series>? 

We are not aware of your exact scenario. Kindly revert us with provide more details of your requirement and provide some screenshots which depicts your requirement which will be helpful in furthermore analysis and provide you the solution sooner. 

 

You write "hard" the circles in addition, but my data is generated dynamically (I don't know in advance how many circles I would have to add), is it also possible to generate this dynamically with their height and their width not written directly in HTML? 

 We have added annotations dynamically in the button click. Please find the below sample and code snippets, 

Code snippet: 

Component.html: 

 

<button id='click' (click)='onChange($event)'>Click</button> 

 <div id="multiple-donut" style="height:330px"> 

<div class="column-chart" id="steps-donut" style="height:330px"> 

              <ejs-accumulationchart #multiplepie style='height: 330px; margin-bottom: 0px' (loaded)='steploaded($event)'> 

                              

              </ejs-accumulationchart> 

</div> 

</div> 

 

Component.ts: 

 

public onChange() { 

    this.pie.annotations = [ 

      { 

        content: '<div id="container1" style="width:330px; height:330px;">', 

        region: "Chart", 

        x: "50%", 

        y: "50%" 

      }, 

      { 

        content: '<div id="container2" style="width:280px; height:280px;">', 

        region: "Chart", 

        x: "50%", 

        y: "50%" 

      } 

    ]; 

    this.pie.refresh(); 

  } 

  public steploaded(args: ILoadedEventArgs): void { 

    let length = args.chart.annotations ? args.chart.annotations.length : 0; 

    let id: string = ''; 

    for (let i = 0; i < length; i++) { 

      id = 'container' + (i + 1); 

      let innerRadius = (80 - i*10) + '%'; 

      let radius = (75 - i*10) + '%'; 

      this.annotationpie1 = new AccumulationChart({ 

        // Initialize the chart series 

        series: [ 

          { 

            dataSource: this.annotationpie1data, 

            palettes: ["#4F7305", "LightGrey"], 

            radius: radius, 

            xName: "x", 

            yName: "y", 

            startAngle: 180, 

            endAngle: 180, 

            innerRadius: innerRadius, 

            name: "Project", 

            explode: false, 

            explodeOffset: "10%" 

          } 

        ], 

        loaded: (args: IAccLoadedEventArgs) => { 

          if (document.getElementById(id + "_border")) { 

            document.getElementById(id + "_border").style.fill = 

              "transparent"; 

          } 

        } 

      }); 

      this.annotationpie1.appendTo("#" + id); 

    } 

  

Sample link: https://stackblitz.com/edit/angular-xox5ca-4r1nq5?file=app.component.ts 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[wissem khaled]

I need something like this: https://stackblitz.com/edit/angular-xox5ca-7bvoqh?file=app.component.ts

The first generated circle is the smallest, like that, I can thereafter generated as many new circle as I wish which are larger according to the data which I recover.

Is it possible to generate the

tag other than writing them with their near-written dimensions in the "content" parameter of the TS file? (Is it possible to create them directly via

in HTML without going through the "content" parameter?). In addition, I did not understand how they were generated, the "container3" is first in the array but its color corresponds to the third in the array "color".

In addition, you generate them via a button but I want to generate them directly when the app loads, as in the first example and I have not succeeded in reproducing this your second example.

I hope my explanations are clearer ( i apologize in advance, i use an automatic translator, i'm not very comfortable with English )

Thanks for your time.

Edit :  I also just realized that the additional circles all have the same value and do not take the different values ​​assigned to them. Is normal ? How else to remedy this concern?

[Baby Palanidurai]

Hi Wissem, 

 

Thanks for your update. 

 

We have analyzed your query. we have prepared a sample based on your requirement. In that, we have added number of annotations based on the pie series points in the load event. And then added doughnut for that number of annotations in loaded events. Please find the below code snippet and sample, 

Code snippet: 

public load(args: ILoadEventArgs): void { 

    let annotations = []; 

    let datasource = args.accumulation.series[0].dataSource; 

    let size = 480; 

    for (let i = 0; i < datasource.length; i++) { 

      size = size - i*100; 

      annotations.push({ 

        content: '<div id="container'+ (i+1)+'"' +  'style="width:' + size + 'px; height:' +size + 'px;">', 

        region: "Chart", 

        x: "50%", 

        y: "50%" 

      }); 

    } 

    args.accumulation.annotations = annotations; 

  } 

  public steploaded(args: ILoadedEventArgs): void { 

    let length = args.chart.annotations ? args.chart.annotations.length : 0; 

 

    let id: string = ""; 

    for (let i = 0; i < length; i++) { 

      id = "container" + (i + 1); 

      let innerRadius = 65 + (i*5) + "%"; 

      let radius = 60 + i + "%"; 

      this.annotationpie1 = new AccumulationChart({ 

        // Initialize the chart series 

        series: [ 

          { 

            dataSource: this.annotationpie1data, 

            palettes: [this.color[i], "LightGrey"], 

            radius: radius, 

            xName: "x", 

            yName: "y", 

            startAngle: 180, 

            endAngle: 180, 

            innerRadius: innerRadius, 

            name: "Project", 

            explode: false, 

            explodeOffset: "10%" 

          } 

        ], 

        enableSmartLabels: true, 

        legendSettings: { 

          visible: false, 

          position: "Top" 

        }, 

        // Initialize the tooltip 

        tooltip: { enable: false }, 

        loaded: (args: IAccLoadedEventArgs) => { 

          if (document.getElementById(id + "_border")) { 

            document.getElementById(id + "_border").style.fill = "transparent"; 

          } 

        } 

      }); 

      this.annotationpie1.appendTo("#" + id); 

    } 

  } 

 

Sample link: https://stackblitz.com/edit/angular-xox5ca-ukmley?file=app.component.ts 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby.