This is a migrated thread and some comments may be shown as answers.

Tooltip using a dataItem which is an array

1 Answer 326 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jurgen
Top achievements
Rank 1
Jurgen asked on 25 Jul 2014, 12:49 PM
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?

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 29 Jul 2014, 08:39 AM
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!
 
Tags
ToolTip
Asked by
Jurgen
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or