Widget Type:
Page Widgets
TPC Version:
  • 4.1
charts-video-logo

The New TPC charts allows you to display your CRM data in Chart format. There are different types of charts available in this widget which are listed below.

  • Bar
  • Column
  • Area
  • Line
  • Pie
  • Funnel

Its very straight forward to setup a TPC chart. First, drag and drop a chart widget from the toolbox to the Page body, click on edit and it will open the widget designer. 

Configuration

Chart Settings

In the chart settings tab, you can select the entity to aggregate and based on your entity you can select the Visualization for you charts and click on Load (Not all the entitles will have a visualisation by default).

In addition to that there are three panels, first panel is “Legend Entries” which let you define series for your charts based on CRM attributes. You can select your attribute, aggregate, Chart type and stack options from this panel per series.  

Second panel is “Horizontal Axis Labels” where You can configure the Horizontal Axis. The first attribute in this section defines the X-axis label. The second attribute in this section defines the X-axis Legend and provides additional grouping for the data based on the attribute.

Lastly, the Chart preview panel where you can see the chart preview.

charts-instructions-1

Appearance

There are number of settings you can change In the Appearance Tab, which are listed below

  • set titles for the entire Chart, X-axis, Y-axis.
  • set to Pannable, Zoomable, Hide or Show Series Labels.
  • Change templates and set themes for the Chart.

 

charts-instructions-2

Data

The data tab is mainly used for adding filters to the generated fetch that was created from the “Charts Settings” tab. You have the option of working with the primary entity or any other entity that the one has a relationship with.

Load Default: Will load the default FetchXML that set to the selected CRM entity.

Build: Will let you build the FetchXML, and you will be able to select what fields that you want to display, filter the data, group the data.  

Filters

The Filters tab contains a myriad of options to filter the records that the widget fetches. For example, you can filter records by the logged-in contacts' ID or by a query string value.

charts-instructions-3

Widget Properties

Basic Properties

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 Title

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

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.

EncryptGuids

The EncryptGuids advanced properties determines whether Guids should be encrypted or not. By default this is set to true.

EnableBootstrapStyles

The EnableBootstrapStyles property gives the user the ability to enable or disable the Boostap style  that added in to the current form. By default, this property is set to True 

EnableKendoThemes

The EnableKendoThemes property gives the user the ability to enable or disable Kendo themes provided by Kendo. Kendo themes are applied to all the TPC widgets that uses Kendo UI Widgets.

More Information about kendo Themes can be found in : http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling.

EnableKendoRtlSupport

The EnableKendoRtlSupport property gives the user the ability to enable or disable the Right to Left Support on the current form. By default, this property is set to False.

More Information about Kendo right to left support can be found in

 http://docs.telerik.com/kendo-ui/accessibility/supporting-rtl-languages

KendoTheme

The Kendo Theme property enables you to set a kendo theme to the form. Here are the list of kendo Themes that you set for this property;

  • Black
  • BlueOpal
  • Bootstrap
  • Default
  • Fiori
  • Flat
  • HighContrast
  • Material
  • MaterialBlack
  • Metro
  • MetroBlack
  • Moonlight
  • Nova
  • Office365
  • Silver
  • Uniform

More Information about kendo Themes can be found in 

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling

Height

You can set the height of the Chart by giving a numeric value to this property. By default, its set to 300px.

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.

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 Title

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

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.

EncryptGuids

The EncryptGuids advanced properties determines whether Guids should be encrypted or not. By default this is set to true.

EnableBootstrapStyles

The EnableBootstrapStyles property gives the user the ability to enable or disable the Boostap style  that added in to the current form. By default, this property is set to True 

EnableKendoThemes

The EnableKendoThemes property gives the user the ability to enable or disable Kendo themes provided by Kendo. Kendo themes are applied to all the TPC widgets that uses Kendo UI Widgets.

More Information about kendo Themes can be found in : http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling.

EnableKendoRtlSupport

The EnableKendoRtlSupport property gives the user the ability to enable or disable the Right to Left Support on the current form. By default, this property is set to False.

More Information about Kendo right to left support can be found in

 http://docs.telerik.com/kendo-ui/accessibility/supporting-rtl-languages

KendoTheme

The Kendo Theme property enables you to set a kendo theme to the form. Here are the list of kendo Themes that you set for this property;

  • Black
  • BlueOpal
  • Bootstrap
  • Default
  • Fiori
  • Flat
  • HighContrast
  • Material
  • MaterialBlack
  • Metro
  • MetroBlack
  • Moonlight
  • Nova
  • Office365
  • Silver
  • Uniform

More Information about kendo Themes can be found in 

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling

Height

You can set the height of the Chart by giving a numeric value to this property. By default, its set to 300px.

API

get_type()

Returns the widget type

Returns

String

get_container()

Returns the container element of the widget.     

Returns

jQuery Object     

get_element()

Returns the element of the widget.

Returns

jQuery Object

hide()

Hides the widget from the page.

Returns

None

show()

Shows the widget on the page.

Returns

None

toggle()

toggle the visibility of the widget on the page.

Returns

None

get_chart()

Returns the kendo Object of chart widget.     

Returns

Kendo Chart Object  : kendo.dataviz.ui.Chart

get_model()

Returns the model object ​of the widget, which contains several useful properties related to the widget.

Returns

Object