Stacked chart with dynamic YAxis

[Matias Bernhof Jakobsen]

Hi. We are seriously considering switching to your component package for Blazor. Currently I'm trying to make a POC for a stacked chart based on our data.

I have a question though. Looking at your examples I see this :

So, you know the YName propertyname. I can't seem to figure out how I would create a stacked chart like this, where the YAxis i unknown. So the period of time can change based on the users selections:

Could you make a very simple example of how you can accomplish that?

Thank you in advance.

Kind regards,
Matias

[Durga Gopalakrishnan]

Hi Matias,

Greetings from Syncfusion.

By default, to render the chart, you need to map the XName and YName values. We have dynamically added axes to the chart to achieve your scenario. Please check with the below snippet and sample.

<SfChart>

<ChartAxes>

    @foreach (AxisData axis in AxisCollection)

    {

        <ChartAxis RowIndex[email protected] Name[email protected]>

        </ChartAxis>

    }

</ChartAxes>

List<AxisData> AxisCollection;

public void AddAxis()

{

    AxisCollection.Add(new AxisData

        {

            RowIndex = 0,

            Name = "yAxis2"

        });

    SeriesCollection.Add(

        new SeriesData

            {

                XName = nameof(LineChartData.Period),

                YName = nameof(LineChartData.Egy_Growth),

                Data = ChartPoints,

                YAxisName = "yAxis2",

                Type = ChartSeriesType.StackingColumn,

                SeriesName = "Series4"

            });

   );

}

Before Adding Axis

After Adding Axis

Sample : https://blazorplayground.syncfusion.com/hZVpDsraSBPiviQF

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Matias Bernhof Jakobsen]

Hi Durga

Thank you for your reply. I did get me a little closer but my problem is with the LineChartData class. You have the "Period" field but then you have specified each of the properties to be bound. This is my current problem - I don't know how many there will be. Could I use a KeyValuePair collection someone? Or similar.

I have data from a grid that I need to reshape into data that the chart understands. It's a dynamic result generated based on a large set of criteria and both the number of rows and the number of columns are dynamic. Looking at my org. image I posted I have:

10 rows (Vehicle brands)

Each row in the above example has 12 columns (but could just as well be 3,4,5 etc. but always a date). I need to build a dataset that fits into the stacked chart that gets me the result. 

Your example has 5 predefined double-properties but mine will be an unknown amount of properties, but the same for each row.

Does that make any sense? 

Making this work is alpha/omega for us, so we greatly appreciate your help.

Kind regards,

Matias

[Durga Gopalakrishnan]

Matias,

We suggest you to get the number of properties available from the list and assign the required field to XName and YName based on your requirement. We cannot map the XName and YName without knowing its name. Please check with the below suggestion. We have attached sample and screenshot for your reference.

protected override void OnInitialized()

{

     foreach (var medal in MedalDetails)

     {

         foreach (var prop in medal.GetType().GetProperties())

         {

             Console.WriteLine("{0}={1}", prop.Name, prop.GetValue(medal, null));

         }

     }

}

Sample : https://blazorplayground.syncfusion.com/VjBzZWqNSLErZiVK

Please let us know if you have any concerns.

[Matias Bernhof Jakobsen]

Thank you for your reply.

Before I give up on this, I need to make sure there's not a misunderstanding. I was able to produce my example using Teleriks charts component but I feel like yours is much more flexible and thurough (and I prefer yours to theirs) and I can't believe it's not possible to produce the example I'm talking about - don't get me wrong, I simply think we might be talking past each other.

So.

I have the following datatable, displayed in a grid 

I can transform the above data easy to whatever the chart needs.

The simple grid would shows the X-axis with the orange-box (Vehicle brand) and the Y-axis with the black box (count). Easy, works fine.

Now i want the stacked version version to display:

X-axis: Green box (the months)
Y-axis: Stacked data based on the orange box and black box 

So the first column would be 3 stacked columns (one for each make) with each their respective count of vehicles (black box)

The X-axis name would be "Period" (to follow the initial example i posted earlier) since this value is the same, but how do I transform the data to a format that the stacked data needs? It must be doable somehow, and please, if you need anything else from me I'll provide whatever you want.

Kind regards,

Matias

[Matias Bernhof Jakobsen]

Just an addition to make sure we understand each other:

You want this format:

<STACKED CHART>
<SERIE 1 XName="Periode" YName="Audi"/>

<SERIE 2 XName="Periode" YName="BMW"/>

<SERIE 3 XName="Periode" YName="Mercedes"/>

</STACKED CHART >

With this list of objects
{Periode: "jan 2023", Audi: 1000, BMW: 2000, Mercedes: 3000}

{Periode: "feb 2023", Audi: 2000, BMW: 3000, Mercedes: 4000}

{Periode: "marts 2023", Audi: 3000, BMW: 4000, Mercedes: 5000}

I have this:
{Periode: "jan 2023", ???-amounts of columns (could be 3 brands, could be 10)}

Could you make an object with 100 predefined columns, and once you reach an empty, you stop making new series? Or is there a more correct 

[Durga Gopalakrishnan]

Matias,

We have prepared sample with your provided data. We suggest you to specify car names as series name, month as x name and counts as y name. Please check with the below screenshot and sample.

<SfChart>

  <ChartSeriesCollection>

    <ChartSeries Name="Audi"></ChartSeries>

    //…

  </ChartSeriesCollection>

</SfChart>

Sample : https://blazorplayground.syncfusion.com/rjhfNiKCptUMmRKI

If the provided suggestion doesn’t meet your requirement, please get back to us. Kindly revert us if you have any other concerns.