function renderDashboard() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: rootUrl + siteIdentifier,
dashboardId: dashboardId,
embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard
authorizationServer: {
url: "http://localhost:8080/embeddetail/get"
},
actionComplete: function(args){
if (args.eventType == "renderWidget") {
var instance = BoldBI.getInstance("dashboard-container");
instance.getWidgetData("Products Summary", (callBackValue) => {
widgetData = callBackValue;}, instance.embedOptions.dashboardId);
}
},
afterFilterApply: function(filteredValue) {
// Parse the JSON data stored in widgetData.data and store it in parsedWidgetData
parsedWidgetData = JSON.parse(widgetData.data);
// Extract the product name from selected filter values
var productName = filteredValue.source.data.selectedFilterValues[0].InitialDimensionFilter.Text[0];
// Check if a selected product was found in the parsed data
var selectedProduct = parsedWidgetData.find((item) => item.column1 === productName);
// If a selected product exists, create chart data
if (selectedProduct) {
var chartData = [
{
Product_Name: productName,
UnitSold: selectedProduct.column5,
UnitsInStock: selectedProduct.column4,
UnitPrice: selectedProduct.column3,
},
];
}
// Create a chart using the selected product's data
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: chartData.Product_Name
},
series: [{
dataSource: chartData,
xName: 'Product_Name', yName: 'UnitPrice',
name: 'Unit Price', type: 'Column',
marker: {dataLabel: { visible: true } }
}, {
dataSource: chartData,
xName: 'Product_Name', yName: 'UnitSold',
name: 'Units Sold', type: 'Column',
marker: {dataLabel: { visible: true } }
}, {
dataSource: chartData,
xName: 'Product_Name', yName: 'UnitsInStock',
name: 'Units In Stock', type: 'Column',
marker: {dataLabel: { visible: true } }
}],
palettes: ["#FF5858FF", "#B9005BFF", "#48D1CC"],
}, '#chartcomponent');
}
});
boldbiEmbedInstance.loadDashboard();
}
function dropdowninteraction(){
var productNameFilters = ["Aniseed Syrup", "Boysenberry Spread", "Cajun Seasoning", "Chai", "Chang", "Cranberry Sauce", "Gumbo Mix", "Ikura", "Mishi Kobe Niku"];
var selectedProducts = ["Aniseed Syrup", "Boysenberry Spread", "Cajun Seasoning", "Chai", "Chang", "Cranberry Sauce", "Gumbo Mix", "Ikura", "Mishi Kobe Niku"];
var extFilter = new ejs.dropdowns.MultiSelect({
dataSource: productNameFilters,
value: selectedProducts,
placeholder: "Select Product",
allowFiltering: true,
mode: 'CheckBox',
filterBarPlaceholder: 'Search Product',
select: function ProductsSelected(args) {
var currentSelectedValues = args.itemData;
selectedProducts = selectedProducts.concat(currentSelectedValues);
},
close: () => {
updatefilters();
},
removed: function deselectedProducts(args) {
var deselectedValue = args.itemData;
selectedProducts = selectedProducts.filter(function (product) {
return product !== deselectedValue;
});
},
});
extFilter.appendTo('#interactivewidget-dropdownlist');
}
document.body.addEventListener('click', function (event) {
var target = event.target;
if (target.classList.contains('e-chips-close') && target.classList.contains('e-close-hooker')) {
selectedProducts = [];
updatefilters();
}
});
function updatefilters() {
var instance = BoldBI.getInstance("widgetContainer");
instance.updateFilters("ProductName=" + selectedProducts);
}