Show contents 

Data Analysis and Building Reports > Plugins > Connecting Custom Chart Templates

Connecting Custom Chart Templates

Application developers can connect custom chart templates. A custom template changes all data series of charts according to the template in the *.svg format. Template file should correspond to certain structure and consist of standard SVG markup and additional attributes of Foresight Analytics Platform.

NOTE. Custom templates can be connected for histograms and pie charts in the tools: Dashboards, Analytical Queries (OLAP), Time Series Analysis only in the web application, and in the designer of business applications.

To connect custom chart templates:

  1. Add SVG template files to the folder with installed web application or designer of business applications:

The path to the folder with installed web application:

The path to the folder with installed designer of business applications:

TIP. To facilitate the use of templates, create the custom_plugins folder that will store a plugin for connecting templates. In the custom_plugins folder create the "templates" folder that will store SVG template files.

  1. Create the ChartTemplates.js plugin with parameters of used templates and place it in the plugins folder:

PP.ChartTemplates = function (settings) {
    PP.ChartTemplates.base.constructor.apply(this, arguments);
    this._Interfaces = [];
};
PP.initClass(PP.ChartTemplates, PP.Object, 'PP.ChartTemplates', [PP.IPlugin]);
PP.Object.defineProps(PP.ChartTemplates, ['Interfaces', 'ImagePath'], false);
PP.ChartTemplates.prototype._ImagePath = PP.ImagePath;
PP.ChartTemplates.prototype.getInstance = function () {
    return null;
};
PP.ChartTemplates.init = function (settings) {
    var t = new PP.ChartTemplates(settings);
    var templates = PP.Ui.getConfig().getChart().getTemplates();
    var newTemplates = {
        '<template name>': {

            'Id': '<template unique identifier>',

            'PPType': '<chart type>',

            // The getImagePath method returns the relative path to template files,
            // specified in the value attribute of the <param> section at Step 3. If the template file 
            // is contained in a single nested folder, specify it before 
            // the <template file name> substitution

            'Source': t.getImagePath() + '<template file name>.svg'

        },
        // Add several templates
        ...
    };
    for (var i = 0, nt; i < templates.length; i++) {
        if (nt = newTemplates[PP.getProperty(templates[i], 'Id')]) {
            templates[i] = nt;
            delete newTemplates[nt.Id];
        }
    }
    for (var c in newTemplates)
        templates.push(newTemplates[c]);
    PP.Ui.getConfig().getChart().setTemplates(templates);
    return t;
};

NOTE. Values specified in the <template name> and <unique template identifier> substitutes can match and correspond to the template file name.

In the <chart type> substitute set one of the values:

  1. Add a plugin description in the config.json/PP.xml configuration file for the web application, or config.json/DBA.config.json for the designer of business applications.

In the config.json file for the web application/designer of business applications use the plugins field to describe plugin: 
"plugins": [
    {
        "name": "ChartTemplates", //plugin name
        "path": "./custom_plugins/ChartTemplates.js", //relative path to the ChartTemplates.js plugin
        "params": [ //plugin opening parameters
          {
            "name": "ImagePath",
            "value": "./custom_plugins/templates/" //relative path to SVG template files
          }
        ]
    },
    {
        ...
    }
]
To describe the plugin in the PP.xml file, use the <plugins> section: 
<plugins>
    <!-- Set relative path to the ChartTemplates.js plugin in the path attribute -->
    <plugin name="ChartTemplates" path="../custom_plugins/ChartTemplates.js" loaded="true">
        <params>
            <!-- Set relative path to SVG template files in the value attribute -->
            <param name="ImagePath" value="../custom_plugins/templates/"/>
        </params>
    </plugin>
</plugins>
To describe the plugin in the DBA.config.json file, use the plugins: 
"plugins": [
    {
        "Path": "../custom_plugins/ChartTemplates.js", //relative path to the ChartTemplates.js plugin
        "Name": "ChartTemplates", //plugin name
        "Loaded": true, //plugin loading method
        "Params":{
            "Param":[{
                "Name": "ImagePath",
                "Value": "../custom_plugins/templates/" //relative path to SVG template files
            }]
        }
    }
]

  1. Restart the web server.

After executing the operations, custom chart templates will be connected in the web application or in the designer of business applications and are available in the drop-down menu of the Styles button on the Chart ribbon tab.

Example of Connecting Custom Templates

To execute the example, download the plugins.zip archive with a set of ready-to-use templates and unarchive it to the web application installation folder C:\Program Files (x86)\Foresight\Analytics Platform 10.x Web Application.

Add plugin description in the PP.xml configuration file in the <plugins> section:

<plugins>
    <plugin name="ChartTemplates" path="../custom_plugins/ChartTemplates.js" loaded="true">
        <params>
            <param name="ImagePath" value="../custom_plugins/templates/"/>
        </params>
    </plugin>
</plugins>

After executing the operations the custom templates are connected in the web application and are available in the drop-down menu of the Styles button on the Chart ribbon tab:

When a custom template is selected, the appearance of chart series is changed, for example:

See also:

Plugins | Chart Types | Custom Chart Template Structure