Display Chart By Week, Label By Month

[Reafidy]

I would like to create the following type of chart:

I have set the BaseUnit to weeks but the label prints as 10/31, 11/7, 11/14 etc

   @(Html.Kendo().Chart<FlightLog.Models.Charts.HoursByWeek>()
        .Name("chart")
        .Theme("bootstrap")
        .Title("Monthly Hours")
        .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        )
        .DataSource(ds => ds
        .Read(r => r.Url(Url.Page("./DashBoard", "HoursPerWeek")).Type(HttpVerbs.Post))
        )
        .Series(series =>
        {
            series.Column(model => model.Hours).CategoryField("Date");
        })
        .CategoryAxis(axis => axis.Date()
        .Labels(labels => labels.Rotation(-45))
        .Labels(labels => labels.DateFormats(dateFormat => dateFormat.Months("MMM")))
        .BaseUnit(ChartAxisBaseUnit.Weeks)

        .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
        )
        )

[Mihaela]

Hello Reafidy,

Thank you for sharing the Chart configuration at your end.

To display the categories as months, you need to set the BaseUnit() option to "ChartAxisBaseUnit.Months". Here is a REPL example for your reference:

https://netcorerepl.telerik.com/QHkfcobd356Y6fzG22

Let me know if the Chart is rendered as per your requirements.

 

Regards, Mihaela Progress Telerik

[Reafidy]

Hi Mihaela,

Thanks for the response and apologies for the long delay getting back to you, I had to temporarily move to another project, however I am now back on this one.

The solution sets the labeling to months but also groups the data by month.  If you look at the example image I posted above the data is grouped into weeks but labelled as months.

So, essentially I need the category axis grouped by weeks but labelled as months.   I should have been clearer in my op, my bad.

Thanks

[Mihaela]

Hi Reafidy,

Thank you for the clarifications.

You could display the weeks and add the months as labels as per the example below:

        .CategoryAxis(axis => axis
            .Date()
            .Labels(labels => labels.Format("MMM").Step(4)) //Set the labels format and step (4 weeks per month)
            .BaseUnit(ChartAxisBaseUnit.Weeks) //Set the "BaseUnit" to "Weeks"
            .MajorGridLines(lines => lines.Visible(false))
            .MajorTicks(lines => lines.Visible(false))
        )

Here is the revised REPL sample for your reference:

https://netcorerepl.telerik.com/cRkqGbFI10NqmK7841

 

 

 

 

[Reafidy]

Getting closer, however modifying the data to spread over the month seems to cause issues:

https://netcorerepl.telerik.com/wHOgQcEe153ircEH39

There are big gaps and multiple labels.

[Mihaela]

You could show the labels over the category axis dynamically (based on the loaded data) by using the Template() method:

        .CategoryAxis(axis => axis
            .Date()
            .Labels(labels => labels.Format("MMM")
                .Template("#:getLabels(value)#")
                )
            .BaseUnit(ChartAxisBaseUnit.Weeks)
            .MajorGridLines(lines => lines.Visible(false))
            .MajorTicks(lines => lines.Visible(true))
        )

<script>
    var shownLabels = [];
    function getLabels(value) {
        let date = new Date(value);
        let monthName = date.toLocaleString('default', { month: 'short' });
        if($.inArray(monthName, shownLabels) == -1) {
            shownLabels.push(monthName);
            return monthName; //show only the unique month names
        }
        return "";
    }
</script>

REPL sample: https://netcorerepl.telerik.com/QHkqcAbr52Lzv4r202

Another option is to create custom labels based on your requirements through the Visual() option (it allows you to modify the labels alignment).

[Reafidy]

Thanks Mihaela, that seems to have solved the issue.