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

Dynamically defining the tooltip format

1 Answer 73 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Andres
Top achievements
Rank 1
Andres asked on 20 Dec 2013, 02:44 PM
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.

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 21 Dec 2013, 10:54 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Sparkline
Asked by
Andres
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or