Search code examples
kendo-uikendo-dataviz

Logarithmic axis scale in Kendo Chart


I have a scenario in which I need the a axis scale to be displayed in Logarithmic order. I did a little search and found that this option is not available but the posts are almost a year old. Has this functionality been provided in the latest releases?

Here are the links of Kendo forum that I looked into

http://www.kendoui.com/forums/dataviz/chart/logarithmic-scale.aspx http://www.kendoui.com/forums/dataviz/chart/does-kendo-support-log-scale.aspx


Solution

  • I know this is an old post, but i found it trying to do something like this. I found a workaround, and it may be it help somebody.

    I found a way to implement a logarithmic scale in Kendo UI. Basically, the idea is convert the values from its logarithmic form to a linear form, then bound the data with a KendoUI serie ("scattered line" in my case) and replace the labels from the Y axis using a template.

    .YAxis(axis => axis
        .Numeric()
        .Title("BER (dB)")
        .Labels(l => l.Template("#= formatLog2('{0:0}', value) #"))
        .Reverse()
        .AxisCrossingValue(double.MaxValue)
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= formatLog('{0:0.00000000000000}', value.y) #")
    

    and the JavaScript function "formatLog2". (it is a scratch code, just to ilustrate the point):

    function formatLog2(format, value) {
    
        if (value < 0) value = value * -1;
    
        value = Math.pow(10, value);
    
        return kendo.format(format, value);
    }
    

    and the DataSource transform:

    using (IDatabase db = Database.Create())
    using (DataTable dt = new DataTable())
    {
        db.ExecuteQuery(dt, Query);
    
        List<UnavailabilityChartPoint> l = new List<UnavailabilityChartPoint>();
    
        foreach (DataRow r in dt.Rows)
        {
            l.Add(new UnavailabilityChartPoint(
            r.Field<DateTime>("Date"),
            Math.Log10(r.Field<double>("UnSignalMonthly"))
            ));
        }
    
        return Json(l);
    }
    

    the important parts are the linear to log and the log to linear transforms:

    value = Math.pow(10, value);    
    Math.Log10(r.Field<double>("UnSignalMonthly"))
    

    Hope this helps somebody.