Hello,
I want to display Several pie charts like the attached sample.
Each diagram represents a group and shows the value of the contribution of each component to the group total.
I can't figure out how to add these diagrams fed from the same data source all at once.
Please advise me any way to address the requirement.
Regards
8 Answers, 1 is accepted

can you please send me such an example as shown in the attached sample?

Could you please help me on this to do the same requirement as shown in the attached file ?
Thanks in advance.
Hello Wassim,
There are different approaches to creating a report that resembles the screenshot you provided, but unfortunately, one graph-item can not directly create multiple pie-charts. This means we have to find solutions to create multiple graphs and make sure each graph consumes data from seperate years. Based on the screenshot and your description I have tried to create a list of requirements that we can base this on:
- Each graph should display data for a single year
- The graphs should be displayed in a grid with two columns, first filling horizontally before moving to a new row
- The legend, explaining the colors used in the graph should be displayed at the bottom
- The report must dynamically adjust to the date-range available in the data-source
Approach 1
The first, simplest approach, is to manually create a graph for each year. This requires that we know, when designing the report, how many graphs are needed and which year each graph should display.
To solve this approach we can simply create multiple graphs, then use the graphs 'Filters' property to limit the data to a single year. We can place each graph in the desired location to make it fill the page, and then remove the legend for all the graphs. Finally, we create one extra graph where we set everything to Visible = False, except the legend. This leaves us with one graph that only displays the legends, and we are free to place this at the location we want it.
This approach will almost fulfill all requirements except the last one, #4. Because we have hard-coded each graph to display a certain year, it will not adapt if one report has a different range of years. I have attached a sample report demonstrating this solution.
Approach 2
There are different solutions to solve the different requirements, but I can not think of a solution that fulfills all requirements.
It is possible to set the data-source directly to the report, then create a grouping that divides the data into groups based on the Year from the date. Inside the group-header that is created, we will then have access to all data-rows per year. To make the report have multiple columns, there is a functionality that makes a report multicolumn. This will automatically fill the contents spread across multiple columns, as explained in the article "How to Create a Multi-Column Report".
But multi-column reports will fill the page first downwards, filling one column, before moving to the next, which is different from our requirement #2 that states it should move across the page before going downwards. With this approach, we will not be able to add the legend at the bottom like in the screenshot either, as we no longer have access to a section that will fill the page-width.
I have attached a sample report for this approach as well.
Approach 3
The last idea is to use the article "How to: Create Multi-Column Report - Across the Page and Then Down". The challenge with this approach is that the list-item used to lay out the content needs expressions to place the data. You can see in the article the field "MyDataIndex" is used as part of the Row- and Column-expression, but I can not think of a way to adapt this to the data in this scenario.
If there is a solution using this approach, I believe it will be a very complicated one, but I thought I would include the article in case you want to check it out and test to see if you find a solution.
Wrapping Up
I apologize for not being able to provide you with a simple solution to your requirements. I still hope the information I did provide was useful and that you can use it to create a report which you will be happy with.
Let me know how it works out, if you run into challenges, or have any other questions.
Regards,
Mads
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Hello Mads,
Thank you for responding.
the 2nd approach is the approach I am looking for.
I tried this in a new report and it works but the concern I have is when I implement this in my existing report which contains existing groups.
How I can use the 2nd approach to display the nb_Plis per lib grouped by Client.(i added a picture in my report, this is what i want to display and in the place indicated in the report)
I am sharing my sample with you online via Dropbox. please check this and advise me any way to address this requirement.
https://www.dropbox.com/s/i3yl63el4i7mqgm/Report%20with%20Multiple%20pie%20charts.trdp?dl=0
Thanks in advance.

Hello Wassim,
You need to place the Graph in a List in the Report Header. The reason for this is that you would like all Graph instances to be packed in the same section and therefore the Graph should be outside the report groups. The List DataSource should be the same that is assigned to the report. Note that you may bind the List DataSource to the ReportItem.DataObject, which will pass the report data to it.
You need to introduce a new group in the List, grouped by the field STA_CLIENT_LIB. Make sure to add Group Header as we are going to display the Graph there. The reason for this is that we need to display all group records in a single Graph. Bind the Graph DataSource to the ReportItem.DataObject, which will pass only the group data to it. Make the row group header and the detail section of the List invisible, as we need to display only the List Group Header containing the Graph.
You may use sorting to display the Group/Graph instances in the desired order.
I have attached the modified sample to demonstrate the approach.
Regards,
Todor
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Thank you Todor for your replay.
It works fine but can I make all the multiple pie Charts created in the same page not each pie chart per page ?
regards,
Hi Wassim,
The last sample I attached displays all the Graphs at the beginning of the report, in its Report Header - see the linked silent video. I have added more data to the JsonDataSource in order to generate more Graphs for demo purposes.
If you would like them packed, for example in columns, you may use the approach from the KB article How to: Create Multi-Column Report - Across the Page and Then Down.
Regards,
Todor
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.