This is a migrated thread and some comments may be shown as answers.

Multi Category Axis Alignment

2 Answers 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 26 May 2018, 12:22 AM

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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 29 May 2018, 01:23 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Veteran
answered on 30 May 2018, 07:27 AM

Hi Tsvetina,

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

Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Tsvetina
Telerik team
Lee
Top achievements
Rank 1
Veteran
Share this question
or