Axes modifications in Dynamics CRM Charts

Update 4/6-2017: Post applies to all versions of Dynamics CRM from CRM 2011 to Dynamics 365.

The axes in the charts are usually fitted properly, but there are situations where it is needed to modify them to bring out a certain point in the data or improve the chart. Luckily we can do a lot with the Axes properties in the xml file, such as changing titles, colors, intervals, axes crossings etc.

A list of the Axes properties can be found here http://msdn.microsoft.com/en-us/library/system.web.ui.datavisualization.charting.axis_properties, but I’ll go through some of them here.

When looking at the exported chart in an xml file you need to locate the axis you want to modify. The Axis section is a part of the ChartArea in the presentationdescription of the xml file.

A standard Y axis section can look like this

In order to apply any of the properties from the referenced list, we will have to insert them between the opening and closing AxisY tags. Had we been working with a secondary Y-axis, we would also have tags for AxisY2. The Microsoft Dynamics 2011 to Dynamics 365 online charts support 2 X axes and 2 Y axes (AxisY1, AxisY2, AxisX1 and AxisX2). I will leave the use of multiple axes to a later blog post.

Notice in the example above that some properties, like LineColor, are defined directly, while some, such as LabelStyle, have their own set of properties. In this blog post, I will only look at properties that can be defined directly. These are the most simple to work with.

In my first example, I will use the property ArrowStyle. The xml file should look like this with the ArrowStyle property added.

When I list the properties, the values in parenthesis are the options for which the property can be set.

ArrowStyle (None, Triangle, SharpTriangle, Lines)

sample from end of X axis

• None (default)
• Triangle
• SharpTriangle
  (chart seems to cut the graphic short so it’s a blunt arrowhead)
• Lines

Crossing (double)

The value indicates where you want the axis to cross. If you want the X axis to cross the Y axis at a certain value, you would insert the Crossing property on the Y axis. A “double” is a numeric value for where the axis is ti be crossed.

Note: Some additional values are available on the Axis property, but these don’t seem to work MS CRM Dynamics 2011 Online. Those values are “MinValue” and “MaxValue“.

Example. If I have a chart displaying the average survey result per day and the results are based on a scale from 1-6, the standard chart would look like this.

But to make it easier to get an understanding of the results I can change the crossing of the Y axis to the neutral point of my scale, which is 3.5. (Since the survey scale is from 1-6, the midpoint is 3.5)

Hence I’ll add

Crossing=”3.5″

to my Y axis properties, which after import would result in this chart.
Note: On Bar Charts the Y axis is horizontal.

Now it is easier to evaluate the results, just by the direction the bar goes. Good feedback is on the right and the poor is on the left.

Unfortunately, the dates are also displayed in the middle of the chart cluttering the information and making some of the data unreadable, but we can fix that.

IsMarksNextToAxis (True, False) – part of Crossing property

Luckily the Crossing property has a related property called “IsMarksNextToAxis“.
IsMarksNextToAxis is a True or False property. This one is a little tricky. I applied the crossing to the Y axis, and by doing that I moved the X axis. That means it is now the marks on the X axis that I want to move.

So between the AxisX tags I will add

IsMarksNextToAxis=”False”

and after import, I’ll have this chart.

I can still do some tweaking of the axes here, but we will get to that later in the property list.

The IsMarksNextToAxis will only work on a chart where the “Crossing” property has been added. And remember, “Crossing on X axis, move Marks on Y axis and vice versa”.

Enabled (Auto, True, False)

“Enabled” refers to whether or not the axis is enabled. Charts will by default always show the axis if it has data and is part of the chart, but if you wish can turn it off entirely by setting

Enabled=”False”.

It basically toggles visibility. Sample of an X axis with Enabled=”False”.

Not sure when exactly when this would be used, but you can if you need to.

IsInterlaced (False, True) and InterlacedColor

The IsInterlaced and InterlacedColor is a simplifed version of StripLines, but will probably cover most basic needs. IsInterlaced is by default set to False and you only need to add it if you want to turn on the function. Setting

IsInterlaced=”True”

will shade every other background banner on the chosen axis in gray.

If you want to change the color, use the

InterlacedColor=”insert color”

property. Note that you are only changing the color of every other interval. The other one will remain white.
Read more about using colors here.

Also, note the height of the interlace banners are based on the interval on the Y axis. This interval can be modified too, but more on that later.

IsLogarithmic (False, True) and LogarithmBase (double)

Charts support a logarithmic scale in case you need. By default IsLogarithmic is turned off, but you can add the property and set its value to “True”.

IsLogarithmic=”True”

The logarithmic scale is by default set to “10”, just like a typical scientific calculator. Should you need to change add

LogarithmBase=”insert value”

and insert the number you need. Not sure when this would be needed in CRM, but good to know 🙂
If you have a good example, please leave a comment!

IsMarginVisible (True, False)

All charts have their margin visible (true) by default. The setting determines if the chart should leave some extra space around the highest datapoints of the series.

Standard
IsMarginVisible=”True”

IsMarginVisible=”False”

Notice that the columns get much closer to all the edges without the margin. There’s aso more space between the columns. This could prove more useful in situations where you don’t have much room to display the chart.

These examples show the same chart, but generated on a narrower space.

IsMarginVisible=”True”                       IsMarginVisible=”False”       
These two chart have been generated on a window with the exact same size, but the one without the margins seems to utilize the space better.

IsReversed (False, True)

In case you need to reverse an axis, you can set the IsReversed=”True”. This creates some significantly different looking charts. This feature could come in handy too on other chart types such as Radar.

IsReversed=”True”

on the Y axis

IsStartedFromZero (False, True)

In case you have some series that have similar high values, you can set the IsStartedFromZero=”False”, so instead of having a set of columns of almost the same height, you can emphasize the difference by starting at a different value. It’s an automatic setting so the chart will decide which value to start at. Often very close to the lowest value. A little too close to my taste.

Default setting

IsStartedFromZero=”True”

IsStartedFromZero=”False”

Notice the lowest value on the Y axis is now 110,000.

LineColor (color)

LineColor seems obvious, but exactly what line is it referring to?
In this example, I’ve inserted the

LineColor=”Red”

on the Y axis.

Notice that it is only the line itself that is being colored, as well as the ArrowStyle if one is applied. The default line color is black, but Dynamics CRM 2011 seems to always set the line color to this grayish setting LineColor=”165, 172, 181″.

More on setting colors here.

LineDashStyle (Dash, DashDot, DashDotDot, Dot, Solid, NotSet)

Note that in these examples the line color has been set to black.

• NotSet – there is no line
• Dash
• DashDot  
• DashDotDot
• Dot
• Solid  (used as standard)

LineWidth (integer)

LineWidth specifies the width of the axis line. Just the line and none of the markers. The default is LineWidth=”1″. Note that any setting here also has an impact on the ArrowStyle property if used.

Minimum, Maximum (doubles)

The Mininum property is always set to 0 unless your data contains negative values. Then the lowest negative value will be used. Use

Minimum=”10″

, if you want to start your axis at the value 10.

The Maximum property works in the same manner, and these can be useful particularly with charts that handle surveys or other evaluations where you use a scale. I.e. from 1-10. Depending on your responses your axis may go to 5 or 12, but would probably rarely end at 10 specifically.

An example may look like this.

If my survey was using the 1-10 scale, I would want that displayed on my Y-axis (on bar charts the Y axis is horizontal. Get used to it). In this case I would set the Minimum value to 1, as that is my lowest value, and the maximum value to 10. I want to see how far the responses are from the top.

Same chart, but the axis change clearly paints a different picture.

IsLabelAutoFit (True, False)

The IsLabelAutoFit property is True by default and controls how the auto-adjustments handles the labes when your chart is being resized in the window.

The property refers only to the values and series names that are on the axes. It does not handle the axis titles.

With the

IsLabelAutoFit=”True”

property on the axis, three other properties can be applied as well. Note that you do not have add the IsLabelAutoFit=”True”. If it is not present, the chart engine will assume the value is true. The first 2 handles the minimum and maximum font sizes.

• LabelAutoFitMaxFontSize (integer – minimum value is “5”)
• LabelAutoFitMinFontSize (integer)

If you use both Min and Max auto fit sizes, then also minimum size must be 5 or higher. It can be lower if used alone.

• LabelAutoFitStyle
  (None, IncreaseFont, DecreaseFont, StaggeredLabels, LabelsAngleStep30, LabelsAngleStep45, LabelsAngleStep90, WordWrap)

Now LabelAutoFitStyle gives us some more options on how the labels are written.

• LabelAutoFitStyle=”None” – the default option and this is how the charts usually work
• LabelAutoFitStyle=”IncreaseFont” – bumps up the font a little.
• LabelAutoFitStyle=”DecreaseFont” – bumbs down the font size a little. Both font setting have a subtle, but noticeable change. Is useful when wanting to control font sizes, but still want them to scale nice according to the chart.
• LabelAutoFitStyle=”StaggeredLabels”
  
  Layers the labels in rows making room for all of them.
• LabelAutoFitStyle=”LabelsAngleStep30″
  
  
• LabelAutoFitStyle=”LabelsAngleStep45″
  
  
• LabelAutoFitStyle=”LabelsAngleStep90″
  
  
• LabelAutoFitStyle=”WordWrap”
  

Common for staggered, angled and wrapped labels is that the property only applies if there isn’t enough room on the axis to display it normally. Since charts out of the box chooses the auto style that seems to fit the best between wordwrap and staggered, these properties should primarily be used if you want to dictate which one should be used, or if you want to force the use the angled labels instead.

These are all autostyles, meaning we can only control so much. If you want full control over how the labels are presented, you should use the LabelStyle property, instead of of the LabelAutoFitStyle property, but more on that one in part 2 of this blog post.

ToolTip (string)

ToolTips can be very helpful as they allow you to elaborate or comment on the axis. The text (string) added to the

ToolTip=”insert text string here”

will be shown to the Dynamics CRM user when the hover their mouse anywhere over the axis area. The tooltip can be added to each axis as necessary.

If the ToolTip property is not used, the chart will display the Title of the axis instead. Unfortunately there doesn’t seem to be a way to disable the ToolTip. If you do not want the ToolTip repeating the Axis title when hovering over it, you either have to set a different ToolTip or just insert “.” or some other small character.

Title (string)

Dynamics CRM always names the axes something like “Sum (Est. Revenue) ($)” or “Territory Name(Territory)”. To replace with something shorter and perhaps more appropriate and easier for the user to understand, use the Title property.

So if we wanted the X axis to just say “Territory” rather than “Territory Name(Territory)” we would set

Title=”Territory”

on the AxisX.

Much better.

TitleAlignment (Near, Center, Far)

The TitleAlignment property determines how far from the axes crossing that the title is displayed. By default it is set as

TitleAlignment=”Center”

• TitleAlignment=”Near”
  
• TitleAlignment=”Center”  (default)
  
• TitleAlignment=”Far”
  

TitleForeColor (color)

This property sets the text color of the title. The default is black, but CRM usually overrides it with a very dark gray (59, 59, 59). The property is using the same color properties as the rest of the chart, so you can enter RGB, hex and the color names. More on colors here.

Hiding the title (not really a property)

There’s no property for not displaying the axis name, so if you want to hide it, set the color as TitleForeColor=”Transparent” and make the font as little as possible to take up less space.

Also note that if there are two series displayed on the same axis, then the system generated sometimes leave out the title on the chart. In this case you have to use the Title property in order to display the Title.

TitleFont (font)

The TitleFont always seems to be a part of the xml schema when you export. If you want to adjust the size of the font, change the font size from 10.5px as needed. It is possible to use point sizes rather pixel height instead. Just replace “px” with “pt“.

TextOrientation (Auto, Horizontal, Rotated90, Rotated270, Stacked) – for axis title only

The TextOrientation property is only for the axis title even though it is not mentioned in the property name.

For the Y axis they look like this (same order as listed above)

Auto and Rotated270 are similar on a standard Y axis. Rotated90 displays the title in the other direction. Horizontal makes it more easy to read, but also uses a lot more space on the axis. The last, stacked, seems like it would only be useful for a very very short title or individual numbers that needs to be listed.

For the X axis they look like this


Auto and Horizontal settings are identical and seems to make the most sense for a horizontal X axis.

Particularly I can’t seem to think of any good use scenario for Rotated90, Rotated270 and Stacked on the X axis since they come out like this.

It is worth noting that the Rotated90 and Rotated270 are degrees of clockwise rotation from a horizontal starting point, even if the chart by default displays the title vertically.

Interval

The interval between the labels on the axes have an auto setting, adjusting the interval to the current size of the chart. If you need to display a specific interval on an axis, use the interval property to adjust it. If you want to display every single value use Interval=”1″, assuming that your axes is based on a whole number. Note that this interval is also used by the IsInterlaced property and can therefore be used to control the height of the interlacing lines. Particularly useful if you are trying to emphasize certain intervals.

Y Axis with Interval=”1″ and Interval=”10″
 
The Interval property will override the IntervalAutoMode property if used.

There’s also an IntervalType property, which is to indicate if the axis is numbers or a date grouping (Days, Weeks, Months, etc.). However, this property does not seem to help as the auto settings always match the data set made in the fetch collection. Setting the IntervalType will not help, but only cause problems if it does not match the series that is beign presented. So my advice is to not use IntervalType.

IntervalAutoMode (FixedCount, VariableCount)

This property is supposed to control whether or not the chart dynamically calculates the interval on axis. However, the charts do that even if the axis has been set to FixedCount. Since the Interval property mentioned above will override this property regardless, it seem a bit of a moot point to be using it in Dynamics CRM charts.

IntervalOffset (double) 0 is same as Auto

Use the IntervalOffset property when you want you skip a certain amount of label points. The value used in the property is the same as the first label you want to displayed. Inserting zero will give you the same result as Auto.

If

IntervalOffset=”5″

when the first label on the axis is 5.

If you are working with dates, you have to add the IntervalOffsetType property to your axis as well. The IntervalOffsetType property has to be the same type as your dategrouping the fetch part of hte xml. (Days, Weeks, Months, etc.) Note: The date types here are plural, but in the dategrouping they are singular.

If we set IntervalOffSetType=”Days” and Interval=”3″, then the first label on the axis will be the third day in the series.

Next chapter

That was it for the simple axis properties. Look back for more in this blog series where I will focus on the axis modification that comes with their own set of extra properties. They are, LabelStyle, MajorGrid, MajorTickMark, MinorGrid, MinorTickMark, ScaleBreakStyle, ScaleView and StripLines.

Hope you found the tip useful. As always please sign up for my newsletter and follow me on Twitter. Follow @CRMChartGuy