5.11.1 widgetPieChart as Reading widget
First of all, an existing widgetPieChart must be identified in the dashboard, of which the id <TARGET_WIDGET_NAME> must be noted.
The JS function to be inserted in the appropriate CK Editor box (in more options) of another widget of the same dashboard, in order to pilot the <TARGET_WIDGET_NAME> widgetPieChart is of the following type:
function execute() {
$('body').trigger({
type: "showPieChartFromExternalContent_<TARGET_WIDGET_NAME>",
eventGenerator: $(this),
targetWidget: "<TARGET_WIDGET_NAME>",
passedData: [{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/M...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:METRO759","metricType":"averageSpeed"},{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/M...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:METRO759","metricType":"avgTime"},{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/M...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:METRO759","metricType":"vehicleFlow"}]
});
}
5.11.2 widgetPieChart as Writing widget
When clicking on an element of the widgetPieChart, a JSON object called param is passed to the execute() function set in the CK Editor, in which there are the type of event (in this case "click") and all the elements present inside the widget in the layers field.
The properties of the sensors passed have to be adapted to prepare data in the suitable format to be read by the target widget, in order to retrieve and display them. Therefore, it is necessary to build a JSON with proper data format.
The following example shows how to send the information to a Radar widget (widgetRadarSeries) related to a selected Entiy/Device or metric which has been clicked on the Pie chart:
var e = param;
let sensName = [];
let metricTypes = [];
var s;
for (let i = 0; i < param.length; i++) {
s = param[i].metricName.replace("DISIT:orionUNIFI:", '');
if (!sensName.includes(s)) {
sensName.push(s);
}
if (!metricTypes.includes(s)) {
metricTypes.push(param[i].metricType);
}
}
let data = buildData(sensName, metricTypes);
if (data.length > 1) {
$('body').trigger({
type: "showRadarSeriesFromExternalContent_w_AggregationSeries_3721_widgetRadarSeries35546",
eventGenerator: $(this),
targetWidget: "w_AggregationSeries_3721_widgetRadarSeries35546",
passedData: data
});
}
}
function buildData(sensName, metricTypes) {
var data = [];
let h = 0;
for (let i = 0; i < (sensName.length); i++) {
for (let j = 0; j < (metricTypes.length); j++) {
data[h] = {};
data[h].metricId = "https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/" + sensName[i];
data[h].metricHighLevelType = "Sensor";
data[h].metricName = "DISIT:orionUNIFI:" + sensName[i];
data[h].metricType = metricTypes[j];
h++;
}
}
return data;
}
5.11.3 WidgetPieChart Time Selection
Widget PieChart also allows you to send a date and time parameter as input to another widget to insert in the calendar. In this way it is possible to synchronize more than one widget at the same moment in time.
For example, if in a dashboard there are two PieChart widgets with different data and I want them to always show data relating to the same moment in time, I can activate this feature so that when I use the calendar in one of the two, the other is also changed.
This feature is activated when you edit the calendar. The following parameters must be set in the execute() function of the widget writer:
event: "set_time"
It is an important parameter because it is used to activate the synchronization function. It doesn't work without it.
datetime: param
This parameter must receive the date of the datetime automatically from the selection of the Calendar.
passedData: []
Usually when writing the PieChart widget it is possible to send a list of elements to the target widget, in the case of the selectionTime this parameter can be represented as an empty array. However, it must be present for the feature to work properly.
function execute() {
$('body').trigger({
type: "showPieChartFromExternalContent_w_AggregationSeries_3854_widgetPieChart37089",
targetWidget: "w_AggregationSeries_3854_widgetPieChart37089",
widgetTitle: "Pie Chart time selection",
event: "set_time",
datetime: param,
passedData: []
});
}
