hide zero line in a chart in jquery kendo

31 Views Asked by At

I have a trend that checks four different time periods and the way it works is that the user must choose from a specific date to a specific date.

  1. The problem I have now is that if it doesn't have data in a certain time period, it returns 0. If I want the trend not to be displayed in that section.
  2. I just want the 0 data not to be shown at the end of the chart, but if I had 0 data in the middle of the chart, it should be shown.

[enter image description here](https://i.stack.imgur.com/mMriN.png)

            _summeryDataSource: function () {
                return new kendo.data.DataSource({
                    page: 1,
                    pageSize: 1000,
                    type: 'aspnetmvc-ajax',
                    transport: {
                        read: {
                            url: '/dashboard/report',
                            data: { carTitle: dashboard.selectedCar ? dashboard.selectedCar.Title : null, selectedDate: dashboard.selectedDate, selectedToDate: dashboard.selectedToDate },
                            dataType: 'json',
                            type: 'POST',
                            beforeSend: function (xhr) {
                                kmc.setRequestVerificationToken(xhr);
                            }
                        }
                    },
                    schema: {
                        aggregateResults: 'aggregateResults',
                        data: 'data',
                        errors: 'errors',
                        total: 'total',
                        model: {
                            id: 'id',
                            fields: {
                                id: { type: 'number' },
                                title: { type: 'string' },
                                trimester: { type: 'number' },
                                sixMonths: { type: 'number' },
                                twelveMonths: { type: 'number' },
                                twentyFourMonths: { type: 'number' }
                            }
                        }
                    },
                    error: function (e) {
                        if (e.status === 'customerror' || e.status === 'parsererror') {
                            kmc.alert(e.errors);
                        } else {
                            var failure = JSON.parse(e.xhr.responseText);
                            if (failure && failure.success === false) {
                                kmc.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + failure.errors);
                            } else {
                                kmc.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + e.xhr.responseText);
                            }
                        }
                    }
                });
            },
            _createSummery: function () {
                $("#summery").kendoChart({
                    dataSource: dashboard._summeryDataSource(),
                    label: {
                        text: "title" //text you want to show
                    },
                    legend: {
                        position: "bottom"
                    },
                    seriesDefaults: {
                        type: "line",
                        markers: {
                            visible: false
                        }
                    },
                    series: [{
                        name: dashboard.res.Trimester,
                        field: "trimester",
                        color: "#305b90"
                    }, {
                        name: dashboard.res.SixMonths,
                        field: "sixMonths"
                    }, {
                        name: dashboard.res.TwelveMonths,
                        field: "twelveMonths"
                    }, {
                        name: dashboard.res.TwentyFourMonths,
                        field: "twentyFourMonths",
                        color: "#8e2ecf"
                    }],
                    categoryAxis: {
                        field: "month",
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}",
                        template: "#= series.name #: #= value #"
                    },
                    editable: {
                        mode: 'popup',
                        template: kendo.template($('#popup-template').html()),
                        window: {
                            open: function (e) {
                                e.sender.element.find('.k-edit-form-container').width(800);
                            }
                        }
                    },
                    edit: function (e) {
                        dashboard._createPopupEditor(e.model);
                    }
                });

                kendo.resize($(".k-card-body"));
            },
0

There are 0 best solutions below