RadHtmlChart Column Chart Data Splitting

[Glenn]

I have data called BookedHours and it is hours that are booked in a day.

Each day's booked hours is totaled from another field called WorkType.

For example, today there are 40 booked hours, 8 of which are vacation, 16 are labor, and 16 are holiday.

I want to have a column that displays the total 40 booked hours in the day, but I want the stacked columns to display the data split up. Following the same example above, 8 hours of the column for today is vacation (colored red), 16 hours stacked on top of that in the same column is labor (colored blue), etc...

I have tried sooo much to get this to work and I can't figure out a way to group the data into a column like that. Here is the HTML code I have:

                                        <telerik:RadHtmlChart ID="RadHtmlChartInstall" runat="server" DataSourceID="odsChart1">
                                            <PlotArea>
                                                <Series>
                                                    <telerik:ColumnSeries DataFieldY="BookedHours" GroupName="WorkType" Stacked="true">
                                                        <LabelsAppearance Visible="false"></LabelsAppearance>
                                                    </telerik:ColumnSeries>
                                                </Series>
                                                <XAxis DataLabelsField="Day">
                                                    <TitleAppearance Text="Day">
                                                        <TextStyle Margin="5" Color="Black" Bold="true" />
                                                    </TitleAppearance>
                                                    <MajorGridLines Visible="false" />
                                                    <MinorGridLines Visible="false" />
                                                    <LabelsAppearance RotationAngle="270" Color="Black" />
                                                </XAxis>
                                                <YAxis>
                                                    <TitleAppearance Text="Booking Time">
                                                        <TextStyle Margin="5" Color="Black" Bold="true" />
                                                    </TitleAppearance>
                                                    <MinorGridLines Visible="false" />
                                                    <LabelsAppearance>
                                                        <TextStyle Margin="3" Color="Black" />
                                                    </LabelsAppearance>
                                                </YAxis>
                                            </PlotArea>
                                            <Legend>
                                                <Appearance Position="Bottom">
                                                    <TextStyle Color="Black" />
                                                </Appearance>
                                            </Legend>
                                        </telerik:RadHtmlChart>

Thanks!

[Rumen]

Hi Glenn,

To create the desired stacked column chart where each segment represents a different work type (e.g., vacation, labor, holiday), it's essential to structure the data source appropriately and bind the chart accordingly. Below is an example to demonstrate how this can be done:

ASPX

<telerik:RadHtmlChart ID="RadHtmlChartInstall" runat="server" >
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="VacationHours" Name="Vacation" Stacked="true">
                <LabelsAppearance Visible="false"></LabelsAppearance>
                <Appearance>
                    <FillStyle BackgroundColor="Red" />
                </Appearance>
            </telerik:ColumnSeries>

            <telerik:ColumnSeries DataFieldY="LaborHours" Name="Labor" Stacked="true">
                <LabelsAppearance Visible="false"></LabelsAppearance>
                <Appearance>
                    <FillStyle BackgroundColor="Blue" />
                </Appearance>
            </telerik:ColumnSeries>

            <telerik:ColumnSeries DataFieldY="HolidayHours" Name="Holiday" Stacked="true">
                <LabelsAppearance Visible="false"></LabelsAppearance>
                <Appearance>
                    <FillStyle BackgroundColor="Green" />
                </Appearance>
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="Day">
            <TitleAppearance Text="Day">
                <TextStyle Margin="5" Color="Black" Bold="true" />
            </TitleAppearance>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <LabelsAppearance RotationAngle="270" Color="Black" />
        </XAxis>
        <YAxis>
            <TitleAppearance Text="Booking Time">
                <TextStyle Margin="5" Color="Black" Bold="true" />
            </TitleAppearance>
            <MinorGridLines Visible="false" />
            <LabelsAppearance>
                <TextStyle Margin="3" Color="Black" />
            </LabelsAppearance>
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Position="Bottom">
            <TextStyle Color="Black" />
        </Appearance>
    </Legend>
</telerik:RadHtmlChart>

ASPX.CS

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Bind the chart to the dummy data
            RadHtmlChartInstall.DataSource = GetDummyData();
            RadHtmlChartInstall.DataBind();
        }
    }

    private List<BookedHoursData> GetDummyData()
    {
        // Create a list of booked hours data
        List<BookedHoursData> dummyData = new List<BookedHoursData>
    {
        new BookedHoursData { Day = "2024-09-10", VacationHours = 8, LaborHours = 16, HolidayHours = 16 },
        new BookedHoursData { Day = "2024-09-11", VacationHours = 6, LaborHours = 18, HolidayHours = 12 },
        new BookedHoursData { Day = "2024-09-12", VacationHours = 5, LaborHours = 20, HolidayHours = 10 },
        new BookedHoursData { Day = "2024-09-13", VacationHours = 4, LaborHours = 22, HolidayHours = 14 },
        new BookedHoursData { Day = "2024-09-14", VacationHours = 3, LaborHours = 24, HolidayHours = 13 }
    };

        return dummyData;
    }

    // Define a class to represent the data structure
    public class BookedHoursData
    {
        public string Day { get; set; }
        public int VacationHours { get; set; }
        public int LaborHours { get; set; }
        public int HolidayHours { get; set; }
    }

The RadHtmlChart uses three ColumnSeries, each representing a different work type: VacationHours (red), LaborHours (blue), and HolidayHours (green). Each series is stacked to represent a cumulative total of the booked hours per day.

The Page_Load event binds the chart to dummy data using the GetDummyData() method. The data is represented by a list of BookedHoursData, with each day showing the number of vacation, labor, and holiday hours. The chart automatically displays this data in a stacked column format.

 

 

Regards,
Rumen
Progress Telerik