topic Re: Modify Axis Values for Letter Grade Category in Developer

Modify Axis Values for Letter Grade Category

jazfunk — Mon, 28 Jun 2021 20:58:24 GMT

I've modified the Microsoft Bullet Chart to have additional bars, and some other necessary customizations. So far, I've been successful.

The trouble I'm having now is attempting to display letter values on the axis. I have only one record in my dataset which I'm attempting to convert numbers (1-10) to their letter grade equivalent (A+, A, A-, B+, B, B-, C+, C, C-, D).

I've modified the visual to convert the numbers to the letters using a JSON object, and it shows in the "Value" in the tooltip, and below the category name where I've manually added the text. However, the Axis still displays the numbers 1-10.

Which approach should I take to get the axis to display letters as needed? I've looked at creating an ordinal scale (couldn't get that to work), and now I'm looking into modifying the axis after the DOM is rendered (with no success, yet).

The visual has a level of complexity where it's not very intuitive to make this modification, at least at my current level of proficiency with D3.

Thanks for any input.

Re: Modify Axis Values for Letter Grade Category

V-lianl-msft — Thu, 01 Jul 2021 07:33:34 GMT

I think it will be very complicated to do so. It is difficult to define the length between letter grade and the number range of letter grade . We also need to consider the order of letter grade.

Re: Modify Axis Values for Letter Grade Category

jazfunk — Thu, 01 Jul 2021 13:25:34 GMT

@V-lianl-msft You're correct in that it was difficult, and took me quite a while to come up with a solution... but I did last night.

I was able to capture the axis right before it was drawn.

This screenshot shows the area in the setUpBulletsHorizontally() method where I instantiated the existing scale, built a new axis, set the tickValues() and tickFormat() methods to the letter/number grade conversion values, then assigned it to the bar.xAxisProperties object if the existing current bar/bullet *resultValue in the loop was non-numeric.

*Note: The "resultValue" property is a custom property I added to the BulletChartModel BarData interface.

Worked like a charm!