Label formatting

5 posts, 0 answers
  1. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 22 Nov 2018 Link to this post

    Hello,

    I have my labels formatted as 2011 9 (year month). Now I want to set that to the following:

    sep 2011

    I have tried the following:
    .Labels(labels => labels.Format("{0:MMM yyyy}")

    But this is not working. Someone that can provide me a solution for this?

  2. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 22 Nov 2018 Link to this post

    Fixed it.

    Only: how can i set invariant culture?

  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5685 posts

    Posted 26 Nov 2018 Link to this post

    Hi,

    The MVC wrappers basically boil down to Kendo UI for jQuery widgets that are instantiated on the client with the settings passed from the server wrapper. Thus, there is no concept that matches InvariantCulture in .NET and the charts can default to the en-US culture if nothing else is specified. If we take the bar chart date axis demo as basis and modify it as follows (green highlights show the change), we will get the result attached at the end. I hope this will fit your needs. For more details see the categoryAxis.labels.culture property and the Kendo Widgets Globalization article.

    @(Html.Kendo().Chart(Model)
    .Name("chart")
    .Series(series =>
    {
        series
            .Column(model => model.Value, categoryExpression: model => model.Date)
            .Aggregate(ChartSeriesAggregate.Avg);
    })
    .CategoryAxis(axis => axis
        .Date()
        .BaseUnit(ChartAxisBaseUnit.Weeks)
        .MajorGridLines(lines => lines.Visible(false))
        .Labels(lbl => lbl.Culture("en-US").Format("MMM yyyy"))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    )

    which will result in the following in the client-side options literal:

        ...//other settings omitted for brevity
    "categoryAxis": [
        {
            "labels": {
                "culture": "en-US",
                "format": "MMM yyyy"
            },
            "majorGridLines": {
                "visible": false
            },
            "baseUnit": "weeks",
            "type": "date"
        }
    ]
        ...//other settings omitted for brevity

     
    All that said, there is another approach you can also consider depending on your use case and needs. With this example, the x-axis items are basically dates and so you have to change he format string. You can, instead, use regular, simple categories that lets you define the string representation of the date in your data source (and model) so that the chart will render the labels exactly as provided by the data source from the server. This will, however, remove the aggregates the chart does for dates, and each item will be spaced equally between the others so you will need to ensure that there are items with empty values for dates/times you want to skip from rendering in the series but to still be present in the axis.

    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Chili
    Chili avatar
    46 posts
    Member since:
    Aug 2018

    Posted 27 Nov 2018 in reply to Marin Bratanov Link to this post

    Dear Marin,

    Thank you for your well written reply! Since multiple languages will see the chart. I could make a check which system they're on and makea  var of it. And put that in the culture().

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5685 posts

    Posted 27 Nov 2018 Link to this post

    Yes, this is the goal in exposing the culture in such a way. Just make sure to also include the proper cultures and messages scripts.
    --Marin
Back to Top