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:
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:
In Windows OS: C:\Program Files (x86)\Foresight\Analytics Platform 10.x Web Application.
In Linux OS: /opt/foresight/fp10.x-webserver.
The path to the folder with installed designer of business applications:
In Windows OS: C:\Program Files (x86)\Foresight\Designer of Business Application 10.x Web Server.
In Linux OS: /opt/foresight/dba/10.x.
TIP. To facilitate the use of templates, create the plugins folder that will store a plugin for connecting templates. In the plugins folder create the templates folder that will store SVG template files.
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': '<unique template 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> substitute
'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:
PP.Ui.ChartColumnTemplate. When histograms.
PP.Ui.ChartPieTemplate. When pie charts.
Add a plugin description in the PP.xml configuration file for the web application, or DBA.config.json for the designer of business applications.
<plugins>
<!-- Set relative path to the ChartTemplates.js plugin in the path attribute -->
<plugin name="ChartTemplates" path="../plugins/ChartTemplates.js" loaded="true">
<params>
<!-- Set relative path to SVG template files in the value attribute -->
<param name="ImagePath" value="../plugins/templates/"/>
</params>
</plugin>
</plugins>
"plugins": [
{
"Path": "../plugins/ChartTemplates.js", //relative path to the ChartTemplates.js plugin
"Name": "ChartTemplates", //plugin name
"Loaded": true, //plugin loading method
"Params":{
"Param":[{
"Name": "ImagePath",
"Value": "../plugins/templates/" //relative path to SVG template files
}]
}
}
]
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.
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> field:
<plugins>
<plugin name="ChartTemplates" path="../plugins/ChartTemplates.js" loaded="true">
<params>
<param name="ImagePath" value="../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: