Dynamically defining the tooltip format

[Andres]

Hi, I'm trying to generate a ListView with a sparkline for each item. Each sparkline is associated with a metric that is provided by data source. Each metric has the information about the service that provides its data and the datatype. I'm using the datatype to define the format of the tooltip. However, the tooltip format function is bind only when each value of the series and not in the sparkline definitio. So, it uses the information of the last metric for all the sparklines. How I can use the correct datatype to set the tooltip?

This is my code: 

01.createChart: function (e) {
02.                var list = e.sender;
03.                var data = list.dataSource.data();
04.                for (var i = 0; i < data.length; i++) {
05.                    var item = list.wrapper.find("[data-uid='" + data[i].uid + "']");
06.                    var chart = item.find(".chart");
07.                    var metric = data[i];
08.                    this.metrics[data[i].uid] = metric.MetricType;
09.                    chart.kendoSparkline({
10.                        type: "column",
11.                        dataSource: new kendo.data.DataSource({
12.                            transport: {
13.                                read: {
14.                                    url: metric.MonthService,
15.                                    dataType: "json"
16.                                },
17.                                parameterMap: function (options, operation) {
18.                                    if (operation === "read") {
19.                                        options.hotelId = 2; // _model.get('hotelId');
20.                                        options.year = 2013; //_model.get('date').getYear() + 1900;
21.                                        options.month = 7; //_model.get('date').getMonth() + 1;
22.                                        return options;
23.                                    }
24.                                    return options;
25.                                }
26.                            }
27.                        }),
28.                        series: [{
29.                                    type: 'column',
30.                                    field: metric.MonthValue,
31.                                    color: '#ff0000',
32.                                    negativeColor: '#0099ff',
33.                                    metricType: metric.MetricType // Hack? or Extension
34.                                }],
35.                        tooltip: {
36.                            format: function () {
37.                                switch (metric.MetricType) {
38.                                    case 0: // Graduacion
39.                                        return "{0:N2}";
40.                                        break;
41.                                    case 1: // Cantidad
42.                                        return "{0:N0}";
43.                                        break;
44.                                    case 2: // Moneda
45.                                        return "{0:C2}";
46.                                        break;
47.                                    case 3: // Indice
48.                                        return "{0:N2}";
49.                                        break;
50.                                    case 4: // Porcentaje
51.                                        return "{0:P2}";
52.                                        break;
53.                                    case 5: //Clasificacion
54.                                        return "{0}";
55.                                        break;
56.                                }
57.                            },
58.                            visible: true,
59.                            shared: false
60.                        }
61.                    });
62.                }

In line 14 I set the url of the service based on the metric information. An in line 37 I trying to use the same approach for defining the tooltip but doesn't work. The last metric info is used for all the tooltips.

Thanks in advance.

[Alexander Popov]

Hi Andres,

In the current scenario I would recommend you to use a tooltip template which formats the data depending on the MetricType, using the kendo.toString method. You can find additional information about KendoUI Templates here.

Regards,
Alexander Popov
Telerik