Dimple Chart

This field uses DimpleJS (opens new window) to draw graphs from supplied data. The field will handle loading the external libraries. The remaining code must be supplied in the script property.

See the Graphs and Charts knowledge base article for working examples of this field.

Properties

Label	Description	Type Name
Summary	A short description of what the field does, displayed in the forms designer to help identify it	SUMMARY
Container Width	The width of the chart's container. You can enter an integer for a fixed width in pixels or any valid HTML size string. Entering a percentage sets the width relative to the container's parent <li> element - useful if you want to position two charts next to each other	CONTAINERWIDTH
Width	The width of the chart. Either an integer for a fixed width in pixels or any valid HTML measure	WIDTH
Height	The height of the chart. Either an integer for a fixed width in pixels or any valid HTML measure	HEIGHT
Default	Default data value for the chart	DEFAULT
Default Function	A JavaScript function that may be used to calculate the default field value This function is executed server-side when the field HTML is being generated and is useful for setting the default when the DEFAULT property is insufficient	DEFFUNC
Script Functions	JavaScript to draw the graph and manipulate the data	CUSTOMFIELDFNS
Handlers	Handlers called when the field is first displayed or its value changes	HANDLERS
Mouse Events	Adds mouse interaction events to chart segments, bars or lines. Supports clicks and mouseMove. Modify the code to add more mouse events. helper.registerCustomFieldFn("FIELDNAME","chartEvents",function(chart){ var mouseClickEvent=function(e){ // your code here }, mouseDownEvent=function(e){ // your code here }, mouseUpEvent=function(e){ // your code here }, mouseMoveEvent=function(e){ // your code here }, mouseOutEvent = function (e){ // your code here }; if (chart){ if (chart.series){ for (var i = 0; i < chart.series.length; i++){ chart.series[i].addEventHandler("click", mouseClickEvent); chart.series[i].addEventHandler("mousedown", mouseDownEvent); chart.series[i].addEventHandler("mouseup", mouseUpEvent); chart.series[i].addEventHandler("mousemove", mouseMoveEvent); chart.series[i].addEventHandler("mouseout", mouseOutEvent); } } } });	EVENTS
Additional Styling Modifier	An optional CSS modifier for the field. See Common Field Properties for an example	ADDITIONALSTYLINGMODIFIER
Documentation	Add documentation to your field to help explain any complex functionality to future users. You might include information on what the field does and how it relates to other fields on the form. Notes added here are only ever visible in the Forms Designer, they can be searched for, viewed and downloaded from the action panel. See Common Field Properties for an example	DOCUMENTATION

Last modified on 8 July 2022

This website uses cookies

Properties

Was this page useful?