CODEWITHSUNDEEP
javascriptangularjskendo-ui
kushal
kushal

Reputation: 181

kendo chart show dates in dd/MM/yyyy on y axis

I am working on angular js application and implementing kendo chart, where I want to show dates in dd/MM/yyyy on y axis in kendo chart, like below image, I could not find any solution yet. Please provide me sample code or plunker link for this

enter image description here

Following are sample code

HTML page

<div kendo-chart
                 k-legend="{ position: 'top' }"
                 k-series-defaults="model.graphSettings"
                 k-series="[
                                 { field: 'value', name: 'Budget BaseLine' },
                                 { field: 'value1', name: 'Budget Real' }]"
                 k-data-source="model.chartDataSource1"
                 k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
                    k-value-axis="{title:{text:'Date'}}"
                 k-rebind="model.chartDataSource1"
                 k-tooltip="{visible: true, template: '#= category #: #= value#'}"
                 style="height: 300px;">
            </div>

angular js Controller

 scope.model.graphSettings = {
            type: 'column'
        };
 var obj = [];
        obj.push({
            category: "Category 1",
            value: new Date(),
            value1: new Date(),

        }, {
            category: "Category 2",
            value: new Date(),
            value1: new Date(),

        })

        scope.model.chartDataSource1 = new kendo.data.DataSource({
            data: obj
        });

Upvotes: 2

Views: 644

Answers (1)

Oggy
Oggy

Reputation: 1666

It is a bit strange that you have dates on the Y-axis - usually dates are on the X-axis.

To achieve what you have shown in the image you need to add a labels section with a template definition to your valueAxis options of the chart widget. Here's an example:

<div kendo-chart
    k-legend="{ position: 'top' }"
    k-series-defaults="model.graphSettings"
    k-series="[{ field: 'value', name: 'Budget BaseLine' },
               { field: 'value1', name: 'Budget Real' }]"
    k-data-source="model.chartDataSource1"
    k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
    k-value-axis="{title:{text:'Date'}, labels: {template: '#= kendo.toString(new Date(value),\'dd/MM/yyyy\') #'}}"
    k-rebind="model.chartDataSource1"
    k-tooltip="{visible: true, template: '#= category #: #= value#'}"
                 style="height: 300px;">
</div>

This assumes that your dates are in a format which could be parsed by the JavaScript date parser, as explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Upvotes: 1

Related Questions