Dynamically defining the tooltip format

2 posts, 0 answers
  1. Andres
    Andres avatar
    31 posts
    Member since:
    May 2011

    Posted 20 Dec 2013 Link to this post

    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.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top