CODEWITHSUNDEEP
jquerykendo-uikendo-chart
snvrthn
snvrthn

Reputation: 385

Kendo UI jquery line chart X-axis lables issue

I'm using Kendo UI for jquery v2019.3.1023 for my project to draw line chart. And I use 'step' parameter to limit the number of labels on X-axis. And it works fine in my local machine,

In local machine

But in production(after release) is shows all the X-axis labels,

In live production site

And following is the code I use to draw chart,

function drawPricePerformaceLineChart(data) {
                let data0 = data.map(function (x) {
                    return {
                        date: new Date(x.Date),
                        value: x.Performance
                    };
                });

                let _steps = Math.floor(data0.length / 8); //************ Steps to show 8 labels

                $("div#<%= lineChartPricePerformace.ClientID %>").html(null);
                $("div#<%= lineChartPricePerformace.ClientID %>").kendoChart({
                    dataSource: {
                        data: data0
                    },
                    seriesDefaults: {
                        type: "line",
                        style: "smooth",
                        markers: {
                            visible: false
                        },
                        categoryField: "date",
                        width: 2
                    },
                    series: [{
                        field: "value",
                        color: "#0170AD"
                    }],
                    categoryAxis: {
                        type: "date",
                        majorGridLines: {
                            visible: false
                        },
                        majorTicks: {
                            visible: false
                        },
                        labels: {
                            visible: true,
                            step: _steps, //************ Steps
                            template: "#: kendo.toString(value, 'dd MMMM yyyy') #"
                        }
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}%",
                        template: "#= kendo.toString(category, 'dd MMMM yyyy') # (#= kendo.toString(value, 'N') #)"
                    }
                });
            }

I need help with this issue.

Upvotes: 0

Views: 567

Answers (1)

jpllosa
jpllosa

Reputation: 2202

But in production(after release) is shows all the X-axis labels,

Are you sure your changes got deployed? It looks like there is more data in production so it might have messed up your step.

Anyway, maybe you need to make your step "smart". We calculate an initial step so that the labels don't overlap. When the chart is zoomed in or out, we recalculate the step and redraw the chart. One thing to note here is that we need to have a name for our category axis so that we can get the min and max axis ranges.

Here's a smart step example:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo Chart Smart Step Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="chart"></div>
    <script>
        // Sample data
        var data = [];
        for (var i = 0; i < 100; i++) {
            var val = Math.round(Math.random() * 10);
            data.push({
                category: "Category " + i,
                value: val
            });
        }

        function createChart() {
            var step = 1;

            if (data.length > 10) {
                step = Math.floor(data.length / 10);
            }

            $("#chart").kendoChart({
                transitions: false,
                dataSource: {
                    data: data
                },
                categoryAxis: {
                    name: "categoryAxis",
                    labels: {
                        step: step,
                    }
                },
                series: [{
                    type: "column",
                    field: "value",
                    categoryField: "category"
                }],
                pannable: {
                    lock: "y"
                },
                zoomable: {
                    mousewheel: {
                        lock: "y"
                    },
                    selection: {
                        lock: "y"
                    }
                },
                zoomEnd: function (e) {
                    var axisMin = e.sender.options.categoryAxis.min;
                    var axisMax = e.sender.options.categoryAxis.max;

                    var step = 1;
                    var length = axisMax - axisMin;
                    if (length > 10) {
                        step = Math.ceil(length / 10);
                    }

                    e.sender.options.categoryAxis.labels.step = step;
                    e.sender.redraw();
                },
            });
        }

        $(document).ready(createChart);
    </script>
</body>

</html>

Upvotes: 0

Related Questions