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

8 posts, 1 answers
  1. Stefano
    Stefano avatar
    10 posts
    Member since:
    Mar 2015

    Posted 15 Jun 2015 Link to this post

    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;
    }

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 17 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Stefano
    Stefano avatar
    10 posts
    Member since:
    Mar 2015

    Posted 17 Jun 2015 in reply to T. Tsonev Link to this post

     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 

  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 18 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Stefano
    Stefano avatar
    10 posts
    Member since:
    Mar 2015

    Posted 25 Jun 2015 in reply to T. Tsonev Link to this post

    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.

  6. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 29 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Stefano
    Stefano avatar
    10 posts
    Member since:
    Mar 2015

    Posted 29 Jun 2015 in reply to T. Tsonev Link to this post

    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!

  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 01 Jul 2015 Link to this post

    Hi,

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



    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top