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

Custom tooltip.template date format based on categoryAxis baseUnit

0 Answers 311 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Deej
Top achievements
Rank 1
Deej asked on 17 Oct 2013, 09:03 PM
If anybody else is wondering, because this code took me forever to figure out, here's how I change the tooltip template date format. Only works with dates, not times. Probably won't be perfect if your time zones are too far apart, but Daylight Saving Time won't screw it up.

$('#DateChart').kendoChart({
    ...
    categoryAxis: {
        baseUnit: "fit",
        autoBaseUnitSteps: {
            seconds: [],
            minutes: [],
            hours: [],
            days: [1],
            weeks: [1],
            months: [1,3],
            years: [1]
        },
        maxDateGroups: MaxBars,
    },
    tooltip: {
        visible: true,
        template: $('#DateChartTemplate').html()
    }
});
  
<script id="DateChartTemplate" type="text/x-kendo-template">
    # var BaseUnit = $('\#DateChart').data("kendoChart").options.categoryAxis.baseUnit;
    var FirstDate = array[0].Date;
    var LastDate = array[array.length - 1].Date;
  
    if (BaseUnit == "days" || (BaseUnit == "fit" &&
    Math.round((LastDate - FirstDate) / 86400000) < MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:ddd MMM d}", category)#
 
    # } else if (BaseUnit == "weeks" || (BaseUnit == "fit" &&
    (Math.round((LastDate - FirstDate) / 86400000)
    + FirstDate.getDay() - LastDate.getDay()) / 7 < MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:'Week of' MMM d}", category)#
 
    # } else if (BaseUnit == "months" || (BaseUnit == "fit" &&
    (LastDate.getFullYear() - FirstDate.getFullYear()) * 12
    + LastDate.getMonth() - FirstDate.getMonth() < 3 * MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:MMMM yyyy}", category)#
 
    # } else { #
        #:value#<br />
        #=kendo.format("{0:yyyy}", category)#
    # } #
</script>

No answers yet. Maybe you can help?

Tags
Charts
Asked by
Deej
Top achievements
Rank 1
Share this question
or