Create a stacked column from the datatable

[Alex]

What is the easiest way to create a stacked column chart using simple datatable?

I have a simple dynamic (query from SQL) datatable below.

I need to build a stacked chart with the date in X and total for that date on Y.

A stack chart sections should represent operator.

All samples and documentation on the SF site has hardcoded names for the data.

For example this sample has hardcoded names for car Manufacturers. But the names in my data table are different every time.

Blazor Stacked Column Chart Example - Syncfusion Demos

Is there a good way to quickly build chart for the datatable ?

Operator 8	2	4/10/2023
Operator 9	63	4/10/2023
Operator 10	1	4/10/2023
Operator 11	45	4/11/2023
Operator 12	23	4/11/2023
Operator 13	5	4/11/2023
Operator 14	6	4/11/2023

[Gopalakrishnan Veeraraghavan]

Hi Alex,

We have analyzed your query. We are rendering a stacked column chart using data from an SQL datatable. We have attached a sample and screenshot for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataTable-1198876843.zip

Screenshot:

Kindly revert us if you have any concerns.

Regards,

Gopalakrishnan Veeraraghavan

[Alex]

Thank you for your response.

But I added another operator and another date to DB, and the chart is not showing correct data.

I would expect to see 4 bars, since I have 4 dates.

And I would expect last bar to be in different color, since this the operator is different from all others.

I am trying to build a dynamic chart, and the sample you provided is not truly dynamic.

I need chart to dynamically add different colors when new operator id's are added.

And show one bar per day.

[Gopalakrishnan Veeraraghavan]

Hi Alex,

We have analyzed your query. We suggest implementing the OnPointRender event to render the stacked column with different colors based on operator_id. We have attached a sample and screenshot for your reference. Please check with the below code snippet.

  public void PointRenderEvent(PointRenderEventArgs args)

  {

        List<Customer> nonDuplicateList = MedalDetails.GroupBy(x => x.OperatorId).Where(g => g.Count() == 1).SelectMany(g => g).ToList();

 

        foreach (var obj in nonDuplicateList)

        {

            if (obj.TotalValue == args.Point.YValue)

            {

                args.Fill = "blue";

            }

         

        }      

  }

Sample:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataTable_(2)-1920065270.zip

Screenshot:

Kindly revert us if the sample doesn't meet your requirements.

Regards,

Gopalakrishnan Veeraraghavan

[Alex]

Thank you for the responses and samples! It solved what I needed.

[Jayashree Suresh Anand]

Hi Alex,

 
You're welcome; we are glad to know that the issue was resolved at your end with the provided samples. Please get back to us if you need any further assistance.

Regards,

Jayashree