Multi Category Axis Alignment

[Lee]

Hi,

I have 2 CategoryAxis, by Month and Year:

.CategoryAxis(axis => axis
                       .Date()
                       .Labels(l => l.Format("{0:MMM}"))
                       .BaseUnit(ChartAxisBaseUnit.Months)
                       .MajorGridLines(lines => lines.Visible(false))
                   )
                   .CategoryAxis(axis => axis
                       .Date()
                       .Labels(l => l.Format("{0:yyyy}"))
                       .BaseUnit(ChartAxisBaseUnit.Years)
                       .MajorGridLines(lines => lines.Visible(false))
                   )

 

Is there a way to align the Year within that Years Months. For instance currently the years are split evenly along the graph and not sitting within the Jan > Dec of the current year. See attached image.

Thanks.

[Tsvetina]

Hi Lee,

Aligning the second axis to the values in the first one cannot be achieved out of the box with the Chart. What I can suggest is to use a single category axis but draw additional content at its bottom to display the year values. This is done with JavaScript in the Chart render event:

.Events(e=>e.Render("onRender"))

function onRender(e){
  var categories = this.options.categoryAxis.categories;
  var current = categories[0];
  var currentYear = current.getFullYear();
  var categoriesGroup = new kendo.drawing.Group();
  var axis = this.getAxis("category");
  var slot, year;

  // Traverse all categories and determine where one year starts and where it ends. When a year ends, draw a line to separate it and add a label.
  for (var i = 1; i < categories.length; i++) {
    //compare current year to the year of the current category
    year = categories[i].getFullYear();
    if (year !== currentYear) {
      slot = axis.slot(current, categories[i]);
      slot.size.height = 100;
      //triggers the logic that draws the slot line and label (e.g. 2011)
      categoriesGroup.append(createCategoryGroup(slot, currentYear));
      //reset the current quarter to the new value
      current = categories[i];
      currentYear = current.getFullYear();
    }
  }
  // draw a slot for the last year in the Chart separately as it requires different logic to determine the end of the slot
  var last = categories[categories.length - 1];
  slot = axis.slot(current, new Date(last.getFullYear(), last.getMonth() + 1));
  slot.size.height = 100;
  categoriesGroup.append(createCategoryGroup(slot, current.getFullYear()));
  // if you do not want vertical lines, remove this
  categoriesGroup.append(new kendo.drawing.Path({stroke: {color: "#dfdfdf"}}).moveTo(slot.bottomRight().x, slot.origin.y).lineTo(slot.bottomRight().x, slot.bottomRight().y));
  // output the result in the Chart
  this.surface.draw(categoriesGroup);
}

function createCategoryGroup(slot, text) {
  var group = new kendo.drawing.Group();
  var text = new kendo.drawing.Text(text);
  kendo.drawing.align([text], slot, "center");
  kendo.drawing.vAlign([text], slot, "center");
  // if you do not want vertical lines, remove this
  group.append(new kendo.drawing.Path({stroke: {color: "#dfdfdf"}}).moveTo(slot.origin.x, slot.origin.y).lineTo(slot.origin.x, slot.bottomRight().y));
  group.append(text)

  return group;
}

You can see a runnable example, where you can modify and test the code, here:
http://dojo.telerik.com/@tsveti/UMEmO/6

Regards,
Tsvetina
Progress Telerik

[Lee]

Hi Tsvetina,

Many thanks, that helped a lot and answered my question. Very much appreciated.