GraphicModel Class

To enable selection and highlight or context menu options, you need to identify and track the graphics shown on the custom visualization which may use any 3rd-party libraries. The GraphicModel class needs to be bound to the graphic to hold data corresponding to the graphics and track the graphics in the selection.

API Details

Member Function Name

setCustomProperties: Use this function to set whatever properties to the graphic model.

Parameters

properties: An object contains the properties you want to store in the graphic model.

Format

{
    property1: value1,
    property2: value2,
    property3: value3,
}

Usage

1. You can call the function more than once, the properties are added incrementally.
2. If you add properties with the same key, the previous value is overwritten by the new value.
3. You can add any number of properties, even one single property.

Example

var graphicModel = new GraphicModel(this);
graphicModel.setCustomProperties({
    packageName: "Books",
    className: "2009",
    value: 100,
    tooltip: "Books of 2009",
});

Member Function Name

getCustomProperty: Use this function to retrieve a single property which is set by function setCustomProperties().

Parameters

N/A

Usage

You can use this function to get a single property value by its key.

Example

var packageName = graphicModel.getCustomProperty("packageName");

Member Function Name

setSelector: Use this function to set the selector which identifies the graphic.

Parameters

selector: This selector can be an attribute selector which refers to a header of a data row, or a metric selector which refers to a row of data (data point).

isAttrSelector: If the selector is an attribute selector, set this parameter true, if metric selector, set false.

Usage

1. You can get rows of data from APIs in DataInterface such as getRawData@DataInterface.

2. Iterate each row, and get the attribute selector in its header or metric selector in it.

3. Set the selector to graphic model to track the corresponding graphic in selection.

Example

var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV, {
      hasSelection: true,
    hasTitleName: true,
                    
});

mojo.array.forEach(rawData, function (row) {
    var headers = row.headers,
    graphicModel = new GraphicModel(this);

    graphicModel.setId(viz.getSelectorHash(row.metricSelector));
    graphicModel.setSelector(row.metricSelector, false);
    graphicModel.setGroupOptions(row.headers);
    graphicModel.setDrillOptions(headers[0].attributeSelector, [{
        dropZoneIndex: 0,
        keepParent: false
    }]);
    graphicModels.children.push(graphicModel);
});

Member Function Name

setGroupOptions: Use this function to set the headers needed for the Group and Calculation options in the context menu

Parameters

headers: The headers which can be used for Group and Calculation to base on.

Usage

1. You can get rows of data from APIs in DataInterface such as getRawData@DataInterface.

2. Iterate each row, and get the headers of the row.

3. Set the header(s) to the graphic model.

   Example

   Copy

   var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV, {
         hasSelection: true,
       hasTitleName: true,
                       
   });
   
   mojo.array.forEach(rawData, function (row) {
       var headers = row.headers,
       graphicModel = new GraphicModel(this);
   
       graphicModel.setId(viz.getSelectorHash(row.metricSelector));
       graphicModel.setSelector(row.metricSelector, false);
       graphicModel.setGroupOptions(row.headers);
       graphicModel.setDrillOptions(headers[0].attributeSelector, [{
           dropZoneIndex: 0,
           keepParent: false
       }]);
       graphicModels.children.push(graphicModel);
   });

Member Function Name

setDrillOptions: Use this function to set the header to drill and the actions of drop zone needed for the Drill option in the context menu.

Parameters

header: The header to be drilled down for the Drill option.

updateDropZoneActions: An object defines the actions performed to update the drop zone of the custom visualization.

dropZoneIndex: The drop zone index to perform the action, starts from 0.

keepParent: Keep the attribute drilled from and append the attribute drilled to or replace it with the attribute drilled to.

Usage

1. You can get rows of data from APIs in DataInterface such as getRawData@DataInterface.
2. Iterate each row, and get the headers of the row.
3. Select one header of the row as the header to drill down, and define actions for updating drop zone after drilling.

Example

var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV, {
      hasSelection: true,
    hasTitleName: true,
                    
});

mojo.array.forEach(rawData, function (row) {
    var headers = row.headers,
    graphicModel = new GraphicModel(this);

    graphicModel.setId(viz.getSelectorHash(row.metricSelector));
    graphicModel.setSelector(row.metricSelector, false);
    graphicModel.setGroupOptions(row.headers);
    graphicModel.setDrillOptions(headers[0].attributeSelector, [{
        dropZoneIndex: 0,
        keepParent: false
    }]);
    graphicModels.children.push(graphicModel);
});

Member Function Name

setGraphicCenter: Use this function to set the coordinate of center of the corresponding graphic of the graphic model.

If you do not set center coordinate of the graphic by this API, the position of context menu on mobile device will be unpredictable after rotating the screen.

Parameters

coordX: The position on the X-axis

coordY: The position on the Y-axis.

Usage

Calculate the center coordinate of the graphic and pass it to the API.