Toggle menu
  1. Community Area
  2. Release Notes
  3. Video Guides
  4. gossinteractive.com
  5. MyGOSS

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

LabelDescriptionType Name
SummaryA short description of what the field does, displayed in the forms designer to help identify itSUMMARY
Container WidthThe 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 otherCONTAINERWIDTH
WidthThe width of the chart. Either an integer for a fixed width in pixels or any valid HTML measureWIDTH
HeightThe height of the chart. Either an integer for a fixed width in pixels or any valid HTML measureHEIGHT
DefaultDefault data value for the chartDEFAULT
Default FunctionA 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 FunctionsJavaScript to draw the graph and manipulate the dataCUSTOMFIELDFNS
HandlersHandlers called when the field is first displayed or its value changesHANDLERS
Mouse EventsAdds 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 ModifierAn optional CSS modifier for the field. See Common Field Properties for an exampleADDITIONALSTYLINGMODIFIER
DocumentationAdd 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 exampleDOCUMENTATION
Last modified on July 08, 2022

Share this page

Facebook icon Twitter icon email icon

Print

print icon