You need to add script reference.
<script src="~/scripts/powerbi-report-authoring.js"></script>
Remember install using
npm install --save powerbi-report-authoring
Reference: powerbi-report-authoring
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/create-add-visual
I'm referring above document and below is my code and error:
My Error:
Error adding visual to report: Error: createVisual method is not available on the page object
Available methods on page object: (10) ['report', 'name', 'displayName', 'isActive', 'visibility', 'defaultSize', 'mobileSize', 'defaultDisplayOption', 'background', 'wallpaper']
My code:
const addVisualToReport = async (report) => {
try {
console.log('Adding visual to report...');
const page = await report.getActivePage();
console.log('Active page:', page);
// Log available methods on the page object
console.log('Available methods on page object:', Object.keys(page));
const visualType = 'barChart'; // Specify the type of visual you want to add
const visualLayout = {
x: 0,
y: 0,
width: 300,
height: 300
};
// Check if createVisual method exists
if (typeof page.createVisual !== 'function') {
throw new Error('createVisual method is not available on the page object');
}
// Create a new visual
const visual = await page.createVisual(visualType, visualLayout);
console.log('Visual created:', visual);
// Sample data for the visual
const sampleData = props.data;
console.log('Inside PowerBIDashboard: data: ', sampleData);
const dataViewMappings = [
{
conditions: [
{ 'Category': { max: 1 }, 'Values': { max: 1 } }
],
categorical: {
categories: {
for: { in: 'Category' },
dataReductionAlgorithm: { top: {} }
},
values: {
select: [{ bind: { to: 'Values' } }]
}
}
}
];
const dataView = {
metadata: {
columns: [
{ displayName: 'Category', queryName: 'Category', type: models.ValueType.fromDescriptor({ text: true }) },
{ displayName: 'Value', queryName: 'Values', isMeasure: true, type: models.ValueType.fromDescriptor({ numeric: true }) }
]
},
categorical: {
categories: [{
source: { displayName: 'Category', queryName: 'Category', type: models.ValueType.fromDescriptor({ text: true }) },
values: sampleData.data.map(d => d.category)
}],
values: {
group: [{
values: [{
source: { displayName: 'Value', queryName: 'Values', isMeasure: true, type: models.ValueType.fromDescriptor({ numeric: true }) },
values: sampleData.data.map(d => d.value)
}]
}]
}
}
};
await visual.update({
dataViews: [dataView],
dataViewMappings: dataViewMappings
});
console.log('Visual updated with sample data');
} catch (error) {
console.error('Error adding visual to report:', error);
}
};
You need to add script reference.
<script src="~/scripts/powerbi-report-authoring.js"></script>
Remember install using
npm install --save powerbi-report-authoring
Reference: powerbi-report-authoring