CODEWITHSUNDEEP
javascriptchartskendo-ui
user2493053
user2493053

Reputation: 281

Kendo chart remove attribute using javascript

I have a kendo column chart, the datasource gets refreshed when different criterias are set via date pickers.

I want to stop the chart from displaying the value axis as a decimal and the only way I have found so far is to either set the format, which results in duplicating numbers, or the major unit, which if my data changes, then this results in overlapping value axis labels. Neither are suitable.

The only way I can now think to do it is to dynamically set the major unit based on whether my maximum value is less than 10, if it is then the major unit is set to 1, if not no major unit isn't set.

This should work fine but, if the major unit gets set to 1, and the data changes I now need to find a way to clear the major unit if my new maximum value is greater than 10.

In javascript I have:

if (highest <= 10) {
   chart.data("kendoChart").options.valueAxis.majorUnit = 1;
} else {
   chart.data("kendoChart").options.valueAxis.majorUnit.remove(); // This does not work
}

I can't just set majorUnit to null or 0, it doesn't like that and there is no documentation on the correct syntax for removing this kind of attribute.

Upvotes: 1

Views: 2013

Answers (3)

Katya S
Katya S

Reputation: 1341

If you are using datasource, you can put this code into requestEnd function, so no chart refresh is required:

$("#chart").kendoChart({
    dataSource: {
        transport: {
            read: {
                url: url,
                dataType: "json",
                type: 'POST'
            }
        },
        // This is to set a step that looks appropriate for the size of the graph
        requestEnd: function(e){
            var max = 1;

            // Iterate over your own data as you need, here my data returns "Category" and "Count" in each row.
            e.response.forEach(function(row){
                if(row.Count > max)
                    max = row.Count;
            });

            if(max <= 10)
                $("#chart").data('kendoChart').options.valueAxis.majorUnit = 2;
            else
                $("#chart").data('kendoChart').options.valueAxis.majorUnit = undefined;
        },
    },

Upvotes: 0

Fabian Gehri
Fabian Gehri

Reputation: 133

This is what worked for me:

chart.data("kendoChart").options.valueAxis.majorUnit = undefined;

Don't forget to call

chart.data("kendoChart").refresh();

Upvotes: 1

AntouanK
AntouanK

Reputation: 4968

Do you have an example to show? Does it help you if you just hide the value axis lines?

http://docs.kendoui.com/api/dataviz/chart#configuration-categoryAxis.line.visible

chart.data('kendoChart').options.valueAxis.line.visible = false;

Upvotes: 0

Related Questions