Chart Renders - No Tooltips

[Headygains]

I'm having an issue with my chart not properly mapping fields I believe it very well could be how I've configured it.

According to the exception PickDistributionModel.UserName is not defined, however upon inspection of the endpoint returning the List<PickDistributionModel> it is populated with the users login.

 

Exception being thrown:

Uncaught ReferenceError: UserName is not defined<br>    at eval (eval at compile (kendo.all.min.js:25), <anonymous>:3:84)<br>    at init._pointContent (kendo.all.min.js:128)<br>    at init.show (kendo.all.min.js:128)<br>    at init._showTooltip (kendo.all.min.js:127)<br>    at r.callObserver (kendo.all.min.js:118)<br>    at r.trigger (kendo.all.min.js:118)<br>    at init.trigger (kendo.all.min.js:127)<br>    at init.notify (kendo.all.min.js:118)<br>    at r.show (kendo.all.min.js:124)<br>    at r.show (kendo.all.min.js:126)

 

Chart Implementation:

@(Html.Kendo().Chart<PickDistributionModel>().Name("picker-workload").Title(title =><br>{<br>title.Text("Pick Distribution (24hr)");<br>title.Position(ChartTitlePosition.Top);<br>}).Legend(legend => legend.Visible(false))<br>.ChartArea(chart => chart.Background("transparent"))<br>.DataSource(source => source.Read(read => read.Action("GetPickDistributions", "BoeingOrder", new{Area=""})))<br>.Series(s => s.Pie(m => m.Total, m => m.UserName)<br>.Tooltip(tooltip => tooltip.Visible(true).Template("#= UserName #: \n 0: #= Open # \n A: #= Audit # \n P: #= Picked #")).StartAngle(150)))

 

Controller Endpoint:

        /// <summary><br>        /// Gets the distribution of picks for users within the last 24 hours.<br>        /// </summary><br>        /// <returns><br>        /// An array of <see cref="PickDistributionModel"/><br>        /// </returns><br>        [HttpPost]<br>        public async Task<ActionResult> GetPickDistributions()<br>        {<br>            try<br>            {<br>                var floor = DateTime.Now.AddDays(-75).Date;<br>                var ceiling = DateTime.Now.AddDays(-74).Date;<br>                using var service = new PickAssignmentService();<br>                var _ = await service.GetPickDistributionsAsync(floor: floor, ceiling: ceiling).ConfigureAwait(false);<br>                return this.Json(_);<br>            }<br>            catch (Exception e)<br>            {<br>                // TODO: Document Exception<br>                var errorId = this.LogError(e, GetUserId(), nameof(BoeingOrderController));<br>                e.ToLog(errorId);<br>            }<br><br>            return BadRequest("Woops, something went wrong.");<br>        }

 

Chart Model:

    /// <summary><br>    /// The model for representing pick distribution in a(n) chart.<br>    /// </summary><br>    public class PickDistributionModel<br>    {<br>        /// <summary><br>        /// The name of the [dbo].[SecurityUser] the pick distribution model represents.<br>        /// </summary><br>        public string UserName { get; set; }<br><br>        /// <summary><br>        /// The total number of picks in a(n) users distribution.<br>        /// </summary><br>        public string Total { get; set; }<br><br>        /// <summary><br>        /// The number of picks in a(n) "picked" status.<br>        /// </summary><br>        public string Picked { get; set; }<br><br>        /// <summary><br>        /// The number of picks in a(n) "non-picked" status.<br>        /// </summary><br>        public string Open { get; set; }<br><br>        /// <summary><br>        /// The number of picks in a(n) "audit" status.<br>        /// </summary><br>        public string Audit { get; set; }<br>    }

[Headygains]

Wow I'm not sure why that happened, I'll link to a gist so it is garbled.

https://gist.github.com/headygains/599f06ebfcdae5436c9eb0d46ae4e45f

[Silviya Stoyanova]

Hello Dalton,

Thank you for the provided code snippet!

You are receiving that error message because in the series.tooltip.template configuration you could use the following predefined options:

• category - the category name
• dataItem - the original data item used to construct the point. Will be null if binding to array.
• series - the data series
• value - the point value (either a number or an object)
• runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
• total - the sum of all previous series values. Available for waterfall series.

For example if you want to access a field of the dataItem you could use -> dataItem.UserName.

I hope that information would help.

Kind Regards,
Silviya Stoyanova
Progress Telerik

[Headygains]

That worked!

Now I have another question related to this same chart, updated chart code:

<script type="text/x-kendo-template" id="pick-distribution-template">

@(Html.Kendo().Chart<PickDistributionModel>().Name("picker-workload")

    .Legend(legend => legend.Visible(false))

    .ChartArea(chart => chart.Background("transparent"))

    .DataSource(source => source.Read(read => read.Action("GetPickDistributions", "BoeingOrder", new{Area=""})))

    .Series(s => s.Pie(m => m.Total, m => m.UserName)

        .Labels(label => label.Visible(true).Template("#= dataItem.UserName #"))

        .Tooltip(tooltip => tooltip.Visible(true)

            .Template("0: #= dataItem.Open # <br/> A: #= dataItem.Audit # <br/> P: #= dataItem.Picked #"))

        .StartAngle(150)).ToClientTemplate())

</script>

 

I'm receiving the following error when I attempt to implement it inside of a TileLayout with:

 

c.Add().Header(h => h.Text("Pick Distribution")).BodyTemplateId("pick-distribution-template").ColSpan(2).RowSpan(2);

 

I receive the following error in console:

Uncaught ReferenceError: dataItem is not defined
    at eval (eval at compile (kendo.all.min.js:25), <anonymous>:3:397)
    at init._initContainers (kendo.all.min.js:117)
    at new init (kendo.all.min.js:117)
    at HTMLDivElement.<anonymous> (kendo.all.min.js:26)
    at Function.each (vendors.min.js:2)
    at w.fn.init.each (vendors.min.js:2)
    at w.fn.init.e.fn.<computed> [as kendoTileLayout] (kendo.all.min.js:26)
    at HTMLDocument.<anonymous> ((index):410)
    at l (vendors.min.js:2)
    at c (vendors.min.js:2)

[Headygains]

Is using dataItem in this context not an option because I'm converting to a client template?

[Silviya Stoyanova]

Hi,

I would suggest calling a custom JavaScript function in the template for the labels and for the tooltip instead of setting them as strings. For example:

//...
.Tooltip(t => t.Visible(true).Template("#=tooltipTemplate()#"))
.Labels(label => label.Visible(true).Template("#= labelTemplate() #"));

<script>
    function tooltipTemplate() {
        return "<div>#= dataItem.type #:#= value #</div>"
    }

    function labelTemplate() {
        return "#= dataItem.type #"
    }
</script>

I have prepared a simple project for a demonstration.

Let me know how it works for you.

Kind Regards,
Silviya Stoyanova
Progress Telerik