Strange legend text while chart is rendering

7 posts, 0 answers
  1. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 07 Mar Link to this post

    I have a chart that uses grouping and creates a legend at the top of the chart.  While the chart is rendering, the legend that appears at the top of the chart contains 'd NaN/NaN/0NaN' as seen in the attached screenshot.  The legends should contain dates in the format of 'ddd dd/MM/yyyy', so I'm assuming the dates are not yet known, so the legend is displaying in this way.

    Is there a way of hiding this until the legend actually has data, because having 'd NaN/NaN/0NaN' show up in the chart does not look good.

    Regards,

    Shawn

  2. Daniel
    Admin
    Daniel avatar
    2177 posts

    Posted 09 Mar Link to this post

    Hello Shawn,

    Assuming that you are using a template to format the date, you could could check if there is value before applying the format in order to avoid this - example.

    Regards,
    Daniel
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 09 Mar in reply to Daniel Link to this post

    Daniel,

    Thank you for the reply.  I am using a template for the legend formatting and I added in your suggestion of checking the value with a ternary expression, but the legend still appears with that text as the chart is rendering.  Here is my chart code:

    @{
        var styleChart = "height: " + Request.Cookies["DefChartHeight"].Value + "px;";
    }
    <
    div id="HourlySales7Days" class="panel panel-default">
        <div class="demo-section k-content wide">
            @(Html.Kendo().Chart<CBECloudBO2.ViewModels.ChartHourlySales7Day>()
                .Name("chartHourlySales7Days")
                .Title("Hourly Sales 7-day Comparitive")
                .Theme("silver")
                .DataSource(datasource => datasource
                        .Read(read => read.Action("Chart_HourlySales7Day", "Home"))
                        .Group(group => group.Add(model => model.SaleDate))
                        .Sort(sort => sort.Add(model => model.Hour).Ascending())
                        )
                .HtmlAttributes(new { style = @styleChart })
                .Events(events => events.Render("onChartRender"))
                .Legend(legend => legend
                    .Visible(true)
                    .Position(ChartLegendPosition.Top)
                    .Labels(label => label.Template("#= text ? kendo.toString(new Date(text), 'ddd dd/MM/yyyy') : ''#"))
                    )
                .ChartArea(chartArea => chartArea.Background("transparent"))
                .Series(series =>
                {
                    series.Column(model => model.Value).Name("#= group.value #").CategoryField("Hour");
                })
                .CategoryAxis(axis => axis
                    .Name("series-axis")
                    .Title("Store Hour")
                    .Categories(p => p.Hour)
                )
                .ValueAxis(axis => axis
                    .Numeric()
                    .Title("Sale Totals")
                    .AxisCrossingValue(0, int.MinValue)
                )
                .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Format("{0}%")
                    .Template("#= kendo.toString(new Date(series.name), 'ddd dd/MM/yyyy') #: #= value #")
                )
            )
        </div>
        <div class="chart-loading"></div>
    </div>

     

    The 'onChartRender' function for the Onrender event is simply cancelling the kendo.ui.progress graphic element that is displayed while the chart is rendering.

    Anything else I can try?

    Regards,

    Shawn

  4. Daniel
    Admin
    Daniel avatar
    2177 posts

    Posted 10 Mar Link to this post

    Hi,

    Could you try removing the series.name option?

    Regards,
    Daniel
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 10 Mar in reply to Daniel Link to this post

    Daniel,

    I removed the .Name("#= group.value #") from the Series and now the legend only displays that NaN text even after fully rendering. See attached screenshot.

    Regards,

    Shawn

  6. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 10 Mar in reply to Shawn Link to this post

    Daniel,

    The version of the Kendo.Mvc we are using is:  2016.3.1028.545

    Regards,

    Shawn

  7. Daniel
    Admin
    Daniel avatar
    2177 posts

    Posted 14 Mar Link to this post

    Hello Shawn,

    In that case could you provide a runnable sample that demonstrates the issue? I am unable to replicate it using the provided configuration and specified version.

    Regards,
    Daniel
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top