1. Home
  2. Forum
  3. Blazor
  4. Dynamic ChartSeries

Dynamic ChartSeries

Hi!

I would like to display the occupancy of rooms in a hotel on a bar chart.

X axis: dates, columns grouped by rooms.

Y axis: available rooms


Since the data is requested from API and the rooms can change dynamically, I could not implement it with the predefined ChartSeries. So I thought I would use the AddSeries method after the data arrives.

Képernyőkép 2022-04-21 151304.png

Képernyőkép 2022-04-21 151349-min.png

But I get this error:

Képernyőkép 2022-04-21 151210.png

Please advise something, thank your very much.

Dataset to be displayed:

[
        {
            "date": "2022.04.17",
            "roomType": "Standard DBL",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "Standard DBL",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "Standard DBL",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "Standard DBL",
            "available": 1
        },
        {
            "date": "2022.04.21",
            "roomType": "Standard DBL",
            "available": 1
        },
        {
            "date": "2022.04.22",
            "roomType": "Standard DBL",
            "available": 1
        },
        {
            "date": "2022.04.23",
            "roomType": "Standard DBL",
            "available": 1
        },
        {
            "date": "2022.04.17",
            "roomType": "APP",
            "available": 2
        },
        {
            "date": "2022.04.18",
            "roomType": "APP",
            "available": 2
        },
        {
            "date": "2022.04.19",
            "roomType": "APP",
            "available": 2
        },
        {
            "date": "2022.04.20",
            "roomType": "APP",
            "available": 3
        },
        {
            "date": "2022.04.21",
            "roomType": "APP",
            "available": 3
        },
        {
            "date": "2022.04.22",
            "roomType": "APP",
            "available": 3
        },
        {
            "date": "2022.04.23",
            "roomType": "APP",
            "available": 3
        },
        {
            "date": "2022.04.17",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.18",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.19",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.20",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.21",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.22",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.23",
            "roomType": "LKSZ-4",
            "available": 1
        },
        {
            "date": "2022.04.17",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.18",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.19",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.20",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.21",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.22",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.23",
            "roomType": "LKSZ-7",
            "available": 4
        },
        {
            "date": "2022.04.17",
            "roomType": "LKSZ-8",
            "available": 1
        },
        {
            "date": "2022.04.18",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.19",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.20",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.21",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.22",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.23",
            "roomType": "LKSZ-8",
            "available": 2
        },
        {
            "date": "2022.04.17",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.21",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.22",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.23",
            "roomType": "BNGLW",
            "available": 0
        },
        {
            "date": "2022.04.17",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.18",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.19",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.20",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.21",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.22",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.23",
            "roomType": "LAK",
            "available": 4
        },
        {
            "date": "2022.04.17",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.21",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.22",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.23",
            "roomType": "PRCL",
            "available": 0
        },
        {
            "date": "2022.04.17",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.21",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.22",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.23",
            "roomType": "DLX",
            "available": 0
        },
        {
            "date": "2022.04.17",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.18",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.19",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.20",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.21",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.22",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.23",
            "roomType": "Egyágyas",
            "available": 1
        },
        {
            "date": "2022.04.17",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.18",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.19",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.20",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.21",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.22",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.23",
            "roomType": "Kétágyas",
            "available": 1
        },
        {
            "date": "2022.04.17",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.18",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.19",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.20",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.21",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.22",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.23",
            "roomType": "Négyágyas",
            "available": 1
        },
        {
            "date": "2022.04.17",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.21",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.22",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.23",
            "roomType": "Studio",
            "available": 0
        },
        {
            "date": "2022.04.17",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.18",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.19",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.20",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.21",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.22",
            "roomType": "3á",
            "available": 0
        },
        {
            "date": "2022.04.23",
            "roomType": "3á",
            "available": 0
        }
    ],



4 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team April 22, 2022 03:53 PM UTC

Hi Marton,


Greetings from Syncfusion.


We are validating your reported scenario. We will update the further details within two business days(26th April 2022). We appreciate your patience until then.


Regards,

Durga Gopalakrishnan.


DG Durga Gopalakrishnan Syncfusion Team April 25, 2022 02:11 PM UTC

Hi Marton,


Thanks for being patience. We have prepared sample based on your requirement. We suggest you to filter the data list based on roomtype and add series for each filtered list. Please check with the below snippet and sample.


@code{

    public List<DateTimeData> ChartPoints { get; set; }

    List<SeriesData> SeriesCollection = new List<SeriesData>() { };

    public String[] SeriesNames = new String[] {"Standard DBL", "APP", "DLX"};

    protected override void OnInitialized()

    {

        ChartPoints = new List<DateTimeData>

        {

            new DateTimeData { Date = new DateTime(2022, 4, 17), RoomType="Standard DBL", Available = 1},

            //…

        };

        foreach (var name in SeriesNames)

        {

            List<DateTimeData> filteredData = ChartPoints.Where(item => item.RoomType == name).ToList();

            SeriesCollection.Add(new SeriesData

            {

                XName = nameof(DateTimeData.Date),

                YName = nameof(DateTimeData.Available),

                Data = filteredData,

                Name = name

            });

        }

    }

}



Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/FilterSeries-2009846493.zip


We already have the documentation for adding and removing the chart series dynamically. Please check with the below link.


UG : https://blazor.syncfusion.com/documentation/chart/how-to/add-remove


Note : We also request you not to use ChartSeries class for adding series instead you can use own class as mentioned in UG.


Kindly revert us if you have any other concerns.


Regards,

Durga Gopalakrishnan.


Marked as answer
MÁ Márton April 28, 2022 08:52 AM UTC

Thank you very much for your help, it is solved!


DG Durga Gopalakrishnan Syncfusion Team April 29, 2022 07:52 AM UTC

Hi Marton,


Most welcome. Please get back to us if you need any further assistance.


Regards,

Durga G.


Loader.
Up arrow icon