Loading...

CRM Chart View

Properties API Related

Widget Type:
Page Widgets
TPC Version:
  • 3.3 +
VideoLogos
The CRM Chart View widget allows you to visualize data by attaching CRM Entity data to a chart. In order for the widget to appear properly, an up-to-date web browser must be used. 

Configuration

Basic Setup

  1. From the Portal Connector widget list, click and drag the CRM Chart View widget into the body of your page.
  2. In order for the widget to properly function, there are a variety of options that must be configured. Click on the edit button to display the prompt. It should look like this:

    Chart View Settings

Data

When you are finished configuring the Chart Settings, click on the Data tab. It should look like this: 

Chart View Data Settings

Chart Series

When you are finished configuring the Data settings for the widget, click on the Chart Series tab. It should look like this: 

Chart View Series Settings 

The Series option allows you to add or remove sets of data to be displayed on the chart.

Axis

When you are finished configuring the Chart Series settings, click on the X-Axis tab. It should look like this: 

Chart View X Axis Settings


  1. When you are finished configuring the X-Axis settings click on the Y-Axis tab. It should look like this: 

    Chart View Y Axis Settings

Filter

  1. When you are finished configuring the Y-Axis settings, click on the Filters tab. It should look like this: 

    Chart View Filters Settings

    The Filters option allows you to filter the data that is retrieved for the chart.
When you are finished configuring the widget, click on the save button to save it.

Widget Properties

Basic Properties

Y-Axis Color

The Y-Axis Color drop down list will allow you to change the color of the Y Axis.

Maximum Y Value

The Maximum Y Value text box will allow you to define a maximum value for the Y Axis of your chart. The maximum value can be positive or negative and it must be more than the Minimum Y Value.

Minimum Y Value

The Minimum Y Value text box will allow you to define a minimum value for the Y Axis of your chart. The minimum value can be positive or negative and it must be less than the Maximum Y Value.

Major Grid Lines Color

The Major Grid Lines Color drop down list will allow you to change the color of the major grids of the chart. Major grid lines are used to separate your X Axis entries.

X-Axis Color

The X-Axis Color drop down list will allow you to change the color of the X Axis.

Step

The Step text box allows you to determine the step at which the axis labels will display (Or how much the chart ‘counts by’). For example, a Minimum X Value of zero and Maximum X Value of ten have been defined. If the Step were set to two, the chart would count by twos from the minimum value to the maximum value. Please note that using a low Step value with significantly higher minimum and maximum values will cause performance issues.

Maximum X Value

The Maximum X Value text box will allow you to define a maximum value for the X Axis of your chart. The maximum value can be positive or negative and it must be more than the Minimum X Value.

Minimum X Value

The Minimum X Value text box will allow you to define a minimum value for the X Axis of your chart. The minimum value can be positive or negative and it must be less than the Maximum X Value.

Tooltip Format String

The Tooltip Format String will denote how data will be appeared when you hover your cursor over a chart component. For example, if a bar in a bar chart has a value of $4,000, hovering your cursor over the bar will display its amount. In addition, the Tooltip Format String can also determine how data will be presented. For example, a Tooltip Format String of {0:C2} will display all tooltips as a currency rounded to two decimal points. More information on Format String types can be found here.

Label Format String

The Label Format String text box will denote where the data will be placed. In addition, the Label Format String can also determine how data will be presented. For example, a Label Format String of {0:C2} will display all numbers as a currency rounded to two decimal points. More information on Format String types can be found here.

Y-Axis Data Field

The Y-Axis Data Field drop down list will allow you to change what data field will be measured on the Y axis.

X-Axis Data Field

The X-Axis Data Field drop down list will allow you to change what data field will be measured on the X axis.

Is Grouping Field

The Is Grouping Field allows you group all individual sets of data into one measure. For example, if you were plotting the amount of revenue you receive per month on your Y Axis, you could use this option to group all individual entries of revenue together by their X Axis to display the total for the month.

Series Name

The Series Name allows you to change the name of the series. This name will appear in the legend of the chart.

Select a Template

The Select a Template drop down list will allow you to select a template for your product to use with the option of creating a new template. If a template is selected, you will be given the additional option of editing the selected template.

Plot Background Color

The Plot Background Color drop down list will allow you to alter the background color of your chart.

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.

Chart Type

The Chart Type drop down list will allow you to choose from a variety of common charts to visualize your data. Charts with [XY] will require an X-Axis Label Display.

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

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.

Y-Axis Color

The Y-Axis Color drop down list will allow you to change the color of the Y Axis.

Maximum Y Value

The Maximum Y Value text box will allow you to define a maximum value for the Y Axis of your chart. The maximum value can be positive or negative and it must be more than the Minimum Y Value.

Minimum Y Value

The Minimum Y Value text box will allow you to define a minimum value for the Y Axis of your chart. The minimum value can be positive or negative and it must be less than the Maximum Y Value.

Major Grid Lines Color

The Major Grid Lines Color drop down list will allow you to change the color of the major grids of the chart. Major grid lines are used to separate your X Axis entries.

X-Axis Color

The X-Axis Color drop down list will allow you to change the color of the X Axis.

Step

The Step text box allows you to determine the step at which the axis labels will display (Or how much the chart ‘counts by’). For example, a Minimum X Value of zero and Maximum X Value of ten have been defined. If the Step were set to two, the chart would count by twos from the minimum value to the maximum value. Please note that using a low Step value with significantly higher minimum and maximum values will cause performance issues.

Maximum X Value

The Maximum X Value text box will allow you to define a maximum value for the X Axis of your chart. The maximum value can be positive or negative and it must be more than the Minimum X Value.

Minimum X Value

The Minimum X Value text box will allow you to define a minimum value for the X Axis of your chart. The minimum value can be positive or negative and it must be less than the Maximum X Value.

Tooltip Format String

The Tooltip Format String will denote how data will be appeared when you hover your cursor over a chart component. For example, if a bar in a bar chart has a value of $4,000, hovering your cursor over the bar will display its amount. In addition, the Tooltip Format String can also determine how data will be presented. For example, a Tooltip Format String of {0:C2} will display all tooltips as a currency rounded to two decimal points. More information on Format String types can be found here.

Label Format String

The Label Format String text box will denote where the data will be placed. In addition, the Label Format String can also determine how data will be presented. For example, a Label Format String of {0:C2} will display all numbers as a currency rounded to two decimal points. More information on Format String types can be found here.

Y-Axis Data Field

The Y-Axis Data Field drop down list will allow you to change what data field will be measured on the Y axis.

X-Axis Data Field

The X-Axis Data Field drop down list will allow you to change what data field will be measured on the X axis.

Is Grouping Field

The Is Grouping Field allows you group all individual sets of data into one measure. For example, if you were plotting the amount of revenue you receive per month on your Y Axis, you could use this option to group all individual entries of revenue together by their X Axis to display the total for the month.

Series Name

The Series Name allows you to change the name of the series. This name will appear in the legend of the chart.

Select a Template

The Select a Template drop down list will allow you to select a template for your product to use with the option of creating a new template. If a template is selected, you will be given the additional option of editing the selected template.

Plot Background Color

The Plot Background Color drop down list will allow you to alter the background color of your chart.

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.

Chart Type

The Chart Type drop down list will allow you to choose from a variety of common charts to visualize your data. Charts with [XY] will require an X-Axis Label Display.

Title

The Title text box will allow you to set the label of your widget. The title will usually appear above the associated widget.

API

get_chartType()

Returns the type of chart. 

Returns

String

get_explodedSeries ()

Returns the names of the series that are exploded. Only applies to some charts.

Returns

String

get_radChart()

Returns the RadHtmlChart object associated with the widget. 

Returns

RadHtmlChart 

Full API With Examples

Examples of CRM Chart View Configuration