Loading...

CRM Column Chart

Properties Related

Widget Type:
Page Widgets
TPC Version:
  • 3.3 +
VideoLogos
The CRM Column Chart is a specialized widget that allows you to create a chart to display data. A column chart represents data by vertical bars. The chart data is fetched by CRM Entities and has the option of presaved configurations for the chart. Additionally, the option to create a custom chart exists.

Configuration

Basic Setup

  1. From The Portal Connector (Charts) widget list, click and drag the CRM Column Chart into the body of the page.

  2. Initially, the chart is blank. Click on the edit button to display the properties prompt. It should look like this: 

    CRM Column Chart Basic Properties

Data

Next, navigate to the Data tab. It should look like this: 

CRM Column Chart Data Properties


Filters

Next, navigate to the Filters tab. It should look like this: 

CRM Column Chart Filter Properties

The Filters tab is used to filter records with little change to the FetchXML.

 

Appearance

Finally, navigate to the Appearance tab. It should look like this: 

CRM Column Chart Appearance Properties

The Appearance tab of the widget properties allows you to have extensive control over how the chart appears. Please note that the CRM Column Chart contains additional options under Miscellaneous.

When you are finished editing the widget properties, click the save button to save it.

Widget Properties

Basic Properties

Base Color Change Amount

The Base Color Change Amount advanced property will determine the percentage (By decimal) that a Base Color will lighten or darken.

Base Color

The Base Color advanced property accepts a color in Hexadecimal (#FFFFFF) notation and will alter all series color.

Axis X Label Rotation

The Axis X Label Rotation advanced properly allows you to rotate the X axis labels. The default is zero and the number is in degrees (°).

Axis Y Label Padding

The Axis Y Label Padding advanced property accepts from one to four integers to determine the amount of padding that the Y Axis labels will have. For example: Setting the padding to '15' will set all sides to 15px. Setting the padding to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the padding to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the padding to '15 30 45 60' will set the top padding to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Label Padding

The Axis X Label Padding advanced property accepts from one to four integers to determine the amount of padding that the X Axis labels will have. For example: Setting the padding to '15' will set all sides to 15px. Setting the padding to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the padding to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the padding to '15 30 45 60' will set the top padding to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Base Color Lighten

The Base Color Lighten advanced property determines if the base color will become lighter or darker. By default this is set to false which causes the series data to become darker.

Axis Y Title Margin

The Axis Y Title Margin advanced property accepts from one to four integers to determine the amount of margins that the Y Axis title will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Title Margin

The Axis X Title Margin advanced property accepts from one to four integers to determine the amount of margins that the X Axis title will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis Y Label Margin

The Axis Y Label Margin advanced property accepts from one to four integers to determine the amount of margins that the Y Axis labels will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Label Margin

The Axis X Label margins advanced property accepts from one to four integers to determine the amount of margin that the X Axis labels will have. For example: Setting the margin to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Null Replacement String

The Null Replacement String advanced property will allow you to replace any null values in a chart with a specified replacement text.

Vertical Axis Data Field (Series)

The Vertical Axis Data Field (Series) drop down list is used to bind data to the Y Axis of the chart. The drop down list is automatically populated via the FetchXML.

Horizontal (Category) Axis Label #2

The Horizontal (Category) Axis Label #2 drop down list will further group the fetched records. It is normally not required. For example, a chart has been configured to count the amount of songs per artist. Normally, the Horizontal (Category) Axis Label #1 would be set to Artists while the Vertical Axis Data Field (Series) would be set to Songs. The Horizontal (Category) Axis Label #2 column can be used to add additional organization to the chart by including genres. The chart would then organize each artist into a genre with the count of songs of that genre appearing.

Horizontal (Category) Axis Label #1

The Horizontal (Category) Axis Label #1 drop down list will choose what fetched fields will appear on the X axis of the chart. This drop down list will be automatically populated by the fetched fields from the FetchXML. Please note that if an alias has been set for the fetched field, the drop down list will retrieve that alias instead.

Saved Visualization

The Saved Visualization drop drop list will allow you to choose from a list of preconfigured chart views based on the default CRM Entities. Please note that if a custom FetchXML fetch is provided for the widget, the Saved Visualization drop down should be set to the upper-most, blank field or else the chart will conflict with the custom FetchXML

FetchXML

The FetchXML text area determines what sort of data a widget will be populated with. Clicking the Load Default Fetch option will populate the FetchXML area with a default fetch based on the CRM Entity chosen.  By clicking the Build button, we will be sent to another page in order to determine what the widget will look up. For more information on how to use the FetchXML function, please see the FetchXML Builder How-To.

Axis-Y Title

The Axis-Y Title text box will determine the name of the Y axis upon the chart.

Axis-X Title

The Axis-X Title text box will determine the name of the X axis upon the chart.

Chart Title

The Chart Title text box will determine the name of the chart. This will appear on the actual chart.

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

Base Color Change Amount

The Base Color Change Amount advanced property will determine the percentage (By decimal) that a Base Color will lighten or darken.

Base Color

The Base Color advanced property accepts a color in Hexadecimal (#FFFFFF) notation and will alter all series color.

Axis X Label Rotation

The Axis X Label Rotation advanced properly allows you to rotate the X axis labels. The default is zero and the number is in degrees (°).

Axis Y Label Padding

The Axis Y Label Padding advanced property accepts from one to four integers to determine the amount of padding that the Y Axis labels will have. For example: Setting the padding to '15' will set all sides to 15px. Setting the padding to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the padding to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the padding to '15 30 45 60' will set the top padding to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Label Padding

The Axis X Label Padding advanced property accepts from one to four integers to determine the amount of padding that the X Axis labels will have. For example: Setting the padding to '15' will set all sides to 15px. Setting the padding to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the padding to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the padding to '15 30 45 60' will set the top padding to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Base Color Lighten

The Base Color Lighten advanced property determines if the base color will become lighter or darker. By default this is set to false which causes the series data to become darker.

Axis Y Title Margin

The Axis Y Title Margin advanced property accepts from one to four integers to determine the amount of margins that the Y Axis title will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Title Margin

The Axis X Title Margin advanced property accepts from one to four integers to determine the amount of margins that the X Axis title will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis Y Label Margin

The Axis Y Label Margin advanced property accepts from one to four integers to determine the amount of margins that the Y Axis labels will have. For example: Setting the margins to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Axis X Label Margin

The Axis X Label margins advanced property accepts from one to four integers to determine the amount of margin that the X Axis labels will have. For example: Setting the margin to '15' will set all sides to 15px. Setting the margins to '15 30' will set the top and bottom to 15px and 30px respectively. Setting the margins to '15 30 45' will set the top to 15px, right and left to 30px, and the bottom to 45px. Setting the margins to '15 30 45 60' will set the top margins to 15px, the right to 30px, the bottom to 45px, and the left to 60px.

Null Replacement String

The Null Replacement String advanced property will allow you to replace any null values in a chart with a specified replacement text.

Vertical Axis Data Field (Series)

The Vertical Axis Data Field (Series) drop down list is used to bind data to the Y Axis of the chart. The drop down list is automatically populated via the FetchXML.

Horizontal (Category) Axis Label #2

The Horizontal (Category) Axis Label #2 drop down list will further group the fetched records. It is normally not required. For example, a chart has been configured to count the amount of songs per artist. Normally, the Horizontal (Category) Axis Label #1 would be set to Artists while the Vertical Axis Data Field (Series) would be set to Songs. The Horizontal (Category) Axis Label #2 column can be used to add additional organization to the chart by including genres. The chart would then organize each artist into a genre with the count of songs of that genre appearing.

Horizontal (Category) Axis Label #1

The Horizontal (Category) Axis Label #1 drop down list will choose what fetched fields will appear on the X axis of the chart. This drop down list will be automatically populated by the fetched fields from the FetchXML. Please note that if an alias has been set for the fetched field, the drop down list will retrieve that alias instead.

Saved Visualization

The Saved Visualization drop drop list will allow you to choose from a list of preconfigured chart views based on the default CRM Entities. Please note that if a custom FetchXML fetch is provided for the widget, the Saved Visualization drop down should be set to the upper-most, blank field or else the chart will conflict with the custom FetchXML

FetchXML

The FetchXML text area determines what sort of data a widget will be populated with. Clicking the Load Default Fetch option will populate the FetchXML area with a default fetch based on the CRM Entity chosen.  By clicking the Build button, we will be sent to another page in order to determine what the widget will look up. For more information on how to use the FetchXML function, please see the FetchXML Builder How-To.

Axis-Y Title

The Axis-Y Title text box will determine the name of the Y axis upon the chart.

Axis-X Title

The Axis-X Title text box will determine the name of the X axis upon the chart.

Chart Title

The Chart Title text box will determine the name of the chart. This will appear on the actual chart.

Examples of CRM Column Chart Configuration