Search code examples
chartskendo-uilogarithm

Kendo chart with normal and Logarithmic scale


I´m trying create a chart with a normal decimal scale on the left and a logarithmic scale on the right side.

enter image description here

the sample shows approximately my result, the only thing missing is that on the scale on the right side I need to present the value of 1000Hz at the exact middle point. (360 line)

function createTympaniHzChart() {
        $("#chart5").kendoChart({
            title: {
                text: "..."                                   

            },
            series: [{
                colorField: "valueColor",
                overlay: { gradient: "none" },
                border: {
                    width: 0,
                    color: ""
                },
                data: [
                    { value: 720, valueColor: "#C60C30" },
                    { value: 355, valueColor: "#FFBE25" },
                    { value: 340, valueColor: "#2EA1FF" }
                ]
            }],
            tooltip: {
                visible: true,
                format: "{0:0}",
                template: "#= value #°"
            },
            categoryAxis: {
                title: {
                    text: "Lorem Ipsum",                       
                    color: "#4D4D4D"
                },
                majorGridLines: {
                    visible: false
                },
                categories: ["A...", "B...", "C..."],
                line: {
                    visible: false
                },
                axisCrossingValues: [0, 10]
            },
            valueAxis: [{
                title: {
                    text: "° Insertion Depth",                        
                    color: "#4D4D4D"
                },
                max: 720,
                majorUnit: 180,
                line: {
                    visible: false
                },
                labels: {
                    format: "{0}°",
                    position: "start"

                }
            },
                {
                    title: {
                        text: "° Pitch (Hz)",                            
                        color: "#4D4D4D"
                    },
                    max: 10000,
                    min: 100,
                    majorUnit:9900,
                    reverse: true,
                    line: {
                        visible: false
                    },
                    labels: {
                        format: "{0}Hz",
                        position: "end"
                    }     

                }
            ]

        });
    }

Is there any other way to add this value?


Solution

  • I manage t solve the issue with a custom function for the data and adding type: "log" property to the valueAxis.

    Add this to the valueAxis:

    data: fibonacciSequence()
    

    The function:

    function fibonacciSequence() {
    
            for (i = 100; i <= 10000; i = i * 10) {
    
                var fibAxisValues = [];
                fibAxisValues.push(i);
    
            }
            return fibAxisValues;
    
        }