Tooltip using a dataItem which is an array

2 posts, 0 answers
  1. Jurgen
    Jurgen avatar
    9 posts
    Member since:
    Oct 2011

    Posted 25 Jul 2014 Link to this post

    I'm developing a stacked chart in Kendo UI. The datasource provides objects which have properties and 2 nested objects. 1 of these nested objects provides the data for the chart. The other nested object provides numbers I need to show in the Tooltip. I set the Tooltip Template like this:

        .Template("#= value #% - N:#= dataItem.numbers #"))

    where value references the first nested object with data (are percentages). This works fine. dataItem.numbers references the second nested object (with corresponding numbers). I would like to show the corresponding numbers. But I always get "undefined" as result.

    How can I change this code so the corresponding numbers are shown in the Tooltip?

            .Series(series =>
            {
                foreach (var s in Model.StapeltrendSerie)
                {
                    if (s.type.Equals("column"))
                    {
                        series.Column(s.data)
                              .Name(s.name)
                              .Axis("Percentage")
                              .Stack(true)
                              .Color(s.color)
                              .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Template("#= value #% - N:#= dataItem.numbers #"))
                              .Labels(labels => labels.Visible(false))
                              .GroupNameTemplate("#= group.value # (#= series.name #)");
                    }else if (s.type.Equals("line") && Model.TrendlijnWeergeven)
                    {
                        series.Line(s.data).Markers(m => m.Type(ChartMarkerShape.Circle))
                              .Name(s.name)
                              .Axis("Score")
                              .Stack(false)
                              .Color("#"+Model.TrendlijnKleur)
                              .Tooltip(tooltip => tooltip.Visible(false))
                              .Labels(labels => labels.Visible(true))
                              .GroupNameTemplate("#= group.value # (#= series.name #)");
                    }
                
                }
            })

    This is the object represented by s

        public class StapeltrendSerieModel
        {
            public decimal[] data { get; set; }
            public int[] numbers { get; set; }
            public string type { get; set; }
            public bool stack { get; set; }
            public string name { get; set; }
            public string color { get; set; }
            public string axis { get; set; }
            public string category { get; set; }
            public int order { get; set; }
        }

    s.data is an array of decimals. (percentages) s.numbers contains the corresponding numbers (as integers) And I was hoping dataItem.numbers would do the trick. But of course DataItem refers to an entry of the s.data array. How can I address the s.numbers value?
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 29 Jul 2014 Link to this post

    Hi,

    Currently the series do not receive a reference to the full data item. Instead, they only get the items in data array with no reference to the parent.
    The traditional way to get around this is to create a view model like this:
    int Value { get; set; }
    int[] Numbers { get; set; }

    This is not terribly efficient as it will require copying the number array for each data point.

    Another approach would be to serialize the numbers independently:
    <script>
        var seriesNumbers = {};
        @foreach (var s in Model.StapeltrendSerie)
        {
            <text>
            seriesNumbers[s.name] = @Json.Encode(s.numbers);
            </text>
        }
    </script>

    The seriesNumbers variable can then be accessed from the tooltip as seriesNumbers[series.name]
    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top