Kendo Line chart - baseUnit fit - tooltip displaying the wrong value

[Stefano]

Hi, 

 I have the following issue using the kendo line chart when the baseUnit is set to "fit". Please open this example: http://jsbin.com/geyeqi/edit?output 

Selecting the second point under June 2013, I'm expecting the following value: 4650. However, the tooltip is showing the wrong value (4850).   

Could you help me to resolve this ASAP?

 Many thanks.

window.minimumDate = new Date(Date.parse('03/01/2013'));
window.maximumDate = new Date(Date.parse('03/01/2015'));

$(document).ready(function () {
    var createLineChart = function (minDate, maxDate) {

        $("#plan-line-chart").kendoChart({
            dataSource: {
                data: getPrices(minDate, maxDate)
            },
            dataBound: function () {
                if (this.dataSource.view().length <= 12) {
                    this.options.categoryAxis.baseUnit = "months";
                }
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            seriesColors: ["rgba(178, 44, 27, 1)"],
            series:
            [
                 {
                     field: "CurrentPrice",
                     name: "Contributions",
                     categoryField: "Date"
                 }
            ],
            valueAxis: {
                majorGridLines: {
                    visible: true
                },
                line: {
                    visible: false
                },
                labels: {
                    template: "#= formatAmount(value) #"
                },
            },
            categoryAxis: {
                field: "Date",
                type: "Date",
                baseUnit: "fit",
                labels: {
                    rotation: 45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= formatAmount(value) #"
            }
        });
    };
    var rangeSliderOnChange = function (element) {
        var minDate = new Date(element.value[0]);
        var maxDate = new Date(element.value[1]);
        var linechart = $("#plan-line-chart").data("kendoChart");
        if (linechart != undefined) {
            linechart.destroy();
            createLineChart(minDate, maxDate);
        }
    };

    var templateString = "#= formatToMonthYear(selectionStart) # - #= formatToMonthYear(selectionEnd) #";

    $("#plan-range-slider").kendoRangeSlider({
        change: rangeSliderOnChange,
        min: window.minimumDate.getTime(),
        max: window.maximumDate.getTime(),
        smallStep: 86400000,
        largeStep: 86400000,
        tickPlacement: "none",
        tooltip: {
            template: kendo.template(templateString)
        }
    });

    createLineChart(window.minimumDate, window.maximumDate);
});

function formatAmount(amount) {
    return kendo.toString(amount, "#,##0.00");
}
function formatToMonthYear(val) {
    return kendo.toString(new Date(val), 'MMM yyyy');
}

function getPrices(min, max) {
    var prices = [
       {
           "Date": new Date(Date.parse('03/01/2015')),
           "CurrentPrice": 8250.00
       },
       {
           "Date": new Date(Date.parse('02/01/2015')),
           "CurrentPrice": 8000.00
       },
       {
           "Date": new Date(Date.parse('01/01/2015')),
           "CurrentPrice": 7750.00
       },
       {
           "Date": new Date(Date.parse('12/01/2014')),
           "CurrentPrice": 7500.00
       },
       {
           "Date": new Date(Date.parse('11/01/2014')),
           "CurrentPrice": 7250.00
       },
       {
           "Date": new Date(Date.parse('10/01/2014')),
           "CurrentPrice": 7000.00
       },
       {
           "Date": new Date(Date.parse('09/01/2014')),
           "CurrentPrice": 6750.00
       },
       {
           "Date": new Date(Date.parse('08/01/2014')),
           "CurrentPrice": 6550.00
       },
       {
           "Date": new Date(Date.parse('07/01/2014')),
           "CurrentPrice": 6350.00
       },
       {
           "Date": new Date(Date.parse('06/01/2014')),
           "CurrentPrice": 6150.00
       },
       {
           "Date": new Date(Date.parse('05/01/2014')),
           "CurrentPrice": 5950.00
       },
       {
           "Date": new Date(Date.parse('04/01/2014')),
           "CurrentPrice": 5750.00
       },
       {
           "Date": new Date(Date.parse('03/01/2014')),
           "CurrentPrice": 5550.00
       },
       {
           "Date": new Date(Date.parse('02/01/2014')),
           "CurrentPrice": 5450.00
       },
       {
           "Date": new Date(Date.parse('01/01/2014')),
           "CurrentPrice": 5350.00
       },
       {
           "Date": new Date(Date.parse('12/01/2013')),
           "CurrentPrice": 5250.00
       },
       {
           "Date": new Date(Date.parse('11/01/2013')),
           "CurrentPrice": 5150.00
       },
       {
           "Date": new Date(Date.parse('10/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('09/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('08/01/2013')),
           "CurrentPrice": 4850.00
       },
       {
           "Date": new Date(Date.parse('07/01/2013')),
           "CurrentPrice": 4750.00
       },
       {
           "Date": new Date(Date.parse('06/01/2013')),
           "CurrentPrice": 4650.00
       },
       {
           "Date": new Date(Date.parse('05/01/2013')),
           "CurrentPrice": 4550.00
       },
       {
           "Date": new Date(Date.parse('04/01/2013')),
           "CurrentPrice": 4450.00
       },
       {
           "Date": new Date(Date.parse('03/01/2013')),
           "CurrentPrice": 4350.00
       }
    ];

    var currentPrices = [];
    $("#currentPrices").text('');
    var minDate = new Date((min.getMonth() + 1) + '/01/' + min.getFullYear());
    var maxDate = new Date((max.getMonth() + 1) + '/01/' + max.getFullYear());
    for (var i = prices.length - 1; i >=  0; i--) {
        if (prices[i].Date >= minDate && prices[i].Date <= maxDate) {
            currentPrices.push(prices[i]);

            $("#currentPrices").append("<li>" + kendo.toString(prices[i].Date, 'MMM yyyy') + " :: " + prices[i].CurrentPrice + "</li>");
        }
    }
    return currentPrices;
}

[T. Tsonev]

Hi,

What you're seeing is the default behavior of the "fit" baseUnit. It will choose a base unit, 3 months in this case, and aggregate the point value.
So you're seeing the maximum (default aggregate) of Jun, Jul and Aug.

Perhaps what you want to do instead is to use "months" instead? Or leave it at the default (automatic) setting. This will ensure that no points are aggregated.

See date series for more information.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Stefano]

 Hi, thanks for you reply.

Unfortunately this behaviour is misleading as I'm looking at the minimum aggregation in the X axis of June2013, July 2013 and August 2013, which is: June 2013; and the maximum aggregation of 4650, 4750 and 4850, which is: 4850.

I cannot use months instead of fit as set of results starting from 2003.

Saying so, the only way to avoid an aggregation is to do not have it one: 

http://jsbin.com/gofiyo/edit?js,output 

[T. Tsonev]

Hello,

I see what you mean. Perhaps it will be best if you keep the aggreates and specify that you don't want to group by months:
        maxDateGroups: 24,
        autoBaseUnitSteps: {
          months: [1]
        }

This will show up to 24 points. If you have more than 24 months visible it will fall back to years.
See the updated snippet. Does this make sense?

Regards,
T. Tsonev
Telerik

 

 

[Stefano]

Sorry,

I'm pretty sure I wasn't clear.

Unfortunately this last reply works only when the data source has a range of 2 years or less. But this is not my case. I have data to display that start from 2003 until today. The category axis in this case will overlap its text below ( i.e: from June '03 to June '15) because there are too many to display.

 Thanks again for your assistance.

[T. Tsonev]

Hi,

The problem of overlapping labels can be solved by using the newly introduced "auto" setting:
    labels: {
        rotation: "auto"
    }

This will ensure labels don't overlap, at least when possible. It's available in the 2015'Q2 release from last week.

I've updated the snippet to demonstrate. I also switched to "min" aggregate. Does this make sense for your scenario?

Regards,
T. Tsonev
Telerik

 

 

[Stefano]

This is awesome. Well done Mr T :)

 Although I ended up to don't use the rotation: "auto", the rest of the code you have implemented is superb!

[T. Tsonev]

Hi,

Cool! Great to hear you've got everything working fine.



Regards,
T. Tsonev
Telerik