New to Kendo UI for jQuery? Download free 30-day trial

Calculate and Set Major Unit for Value Chart Axis

Environment

Product Progress® Kendo UI® Chart for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I calculate and set the major unit for the values axis in the Chart?

Solution

In this scenario, you also need to name the axis. The effective axis range is available in the render event handler.

The API reference for the relevant methods and events that are used in the following example are:

    <div class="clearfix" id="FirstChart"></div>

    <script>
      var TestDataSource =[{"SeriesName":"Series 1","Views":419,"DayDate":"2016-08-31T18:30:00.000Z"},{"SeriesName":"Series 1","Views":224,"DayDate":"2016-08-31T19:30:00.000Z"},{"SeriesName":"Series 1","Views":196,"DayDate":"2016-08-31T20:30:00.000Z"},{"SeriesName":"Series 1","Views":405,"DayDate":"2016-08-31T21:30:00.000Z"},{"SeriesName":"Series 1","Views":202,"DayDate":"2016-08-31T22:30:00.000Z"},{"SeriesName":"Series 1","Views":189,"DayDate":"2016-08-31T23:30:00.000Z"},{"SeriesName":"Series 1","Views":438,"DayDate":"2016-09-01T00:30:00.000Z"},{"SeriesName":"Series 2","Views":863,"DayDate":"2016-09-01T01:30:00.000Z"},{"SeriesName":"Series 1","Views":1231,"DayDate":"2016-09-01T02:30:00.000Z"},{"SeriesName":"Series 1","Views":4289,"DayDate":"2016-09-01T03:30:00.000Z"},{"SeriesName":"Series 1","Views":2791,"DayDate":"2016-09-01T04:30:00.000Z"},{"SeriesName":"Series 1","Views":2381,"DayDate":"2016-09-01T05:30:00.000Z"},{"SeriesName":"Series 2","Views":4000,"DayDate":"2016-09-01T06:30:00.000Z"},{"SeriesName":"Series 1","Views":2224,"DayDate":"2016-09-01T07:30:00.000Z"},{"SeriesName":"Series 1","Views":2134,"DayDate":"2016-09-01T08:30:00.000Z"},{"SeriesName":"Series 1","Views":1944,"DayDate":"2016-09-01T09:30:00.000Z"},{"SeriesName":"Series 1","Views":2101,"DayDate":"2016-09-01T10:30:00.000Z"},{"SeriesName":"Series 1","Views":1884,"DayDate":"2016-09-01T11:30:00.000Z"},{"SeriesName":"Series 2","Views":1950,"DayDate":"2016-09-01T12:30:00.000Z"},{"SeriesName":"Series 1","Views":1965,"DayDate":"2016-09-01T13:30:00.000Z"},{"SeriesName":"Series 1","Views":2505,"DayDate":"2016-09-01T14:30:00.000Z"},{"SeriesName":"Series 2","Views":3004,"DayDate":"2016-09-01T15:30:00.000Z"},{"SeriesName":"Series 1","Views":2118,"DayDate":"2016-09-01T16:30:00.000Z"},{"SeriesName":"Series 1","Views":1017,"DayDate":"2016-09-01T17:30:00.000Z"},{"SeriesName":"Series 2","Views":2800,"DayDate":"2016-08-31T18:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-08-31T19:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-08-31T20:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-08-31T21:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-08-31T22:30:00.000Z"},{"SeriesName":"Series 2","Views":500,"DayDate":"2016-08-31T23:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T00:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T01:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T02:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T03:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T04:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T05:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T06:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T07:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T08:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T09:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T10:30:00.000Z"},{"SeriesName":"Series 2","Views":0,"DayDate":"2016-09-01T11:30:00.000Z"},{"SeriesName":"Series 2","Views":900,"DayDate":"2016-09-01T12:30:00.000Z"}];

      function createChart(divId,dataToPlot) {
        $("#"+divId).kendoChart({
          dataSource: {
            data: dataToPlot,
            group: {
              field: "SeriesName"
            },
            schema: {
              model: {
                fields: {
                  DayDate: {
                    type: "date"
                  }
                }
              }
            }
          },
          seriesDefaults: {
            type: "line",
            style: "smooth"
          },
          series: [{
            type: "line",
            field:"Views",
            name: "#=group.value#",
            categoryField: "DayDate",
            missingValues: "zero"
          }],
          legend: {
            position: "top"
          },
          categoryAxis: {
            labels: {
              format: "HH:mm",
              rotation: 315
            },
            crosshair: {
              visible: false
            },
            padding: {
            },
            majorGridLines: {
              visible: false
            },
            min: new Date("2016-09-01 00:00"),
            max: new Date("2016-09-01 23:00"),
            baseUnit: "hours",
          },
          valueAxis: {
            // Axis must be named
            name: "value",
            labels: {
              format: "{0:n0}",
            },
          },
          title: {
            text: "Test Major Grid Lines"
          },
          tooltip: {
            visible: true,
          },
          render: function(e) {
            // Effective axis range is available in the render event
            //
            // See
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/render
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/getAxis
            // https://docs.telerik.com/kendo-ui/api/javascript/dataviz/chart/chart_axis
            var range = e.sender.getAxis("value").range();
            var majorUnit = range.max / 3;
            var axis = e.sender.options.valueAxis;

            if (axis.majorUnit !== majorUnit) {
              axis.majorUnit = majorUnit;

              // We need to redraw the chart to apply the changes
              e.sender.redraw();
            }            
          }
        });
      }

      $(function(){
        createChart("FirstChart",TestDataSource);
      });
    </script>

See Also

In this article