I am trying with this but unable to load the data in ResourceHistogram
<import { BryntumResourceHistogramProps } from '@bryntum/gantt-react';
import '../lib/StatusColumn';
import '../lib/GanttToolbar';
import { ProjectModel } from '@bryntum/gantt';
import { ganttProps } from './GanttProps';
import { projectProps } from './GanttProjectProps';
const project = new ProjectModel({
startDate : '2024-09-01',
endDate : '2025-01-08',
transport : {
load : {
url : 'data/testdata.json'
}
},
autoSetConstraints : true,
autoLoad : true,
// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse : true
});
// Define the resource histogram props object
export const resourcehistogramProps: BryntumResourceHistogramProps = {
resourceImagePath: 'data/Scheduler/images/users/',
projectProps,
startDate: new Date(2020, 3, 19),
endDate: new Date(2020, 4, 15),
rowHeight: 60,
autoHeight: true,
minHeight: '20em',
showBarTip: true,
showMaxEffort: true,
showBarText: true,
columns: [
{
type: 'resourceInfo',
width: 200,
field: 'name',
text: 'Resource'
}
]
};
// Separate code for initializing the ResourceHistogram
const targetElement = document.getElementById('targetDiv'); // Assuming 'targetDiv' exists in your DOM
if (targetElement) {
targetElement.innerHTML = '<p>This demo shows the Histogram widget</p>';
// Create the ProjectModel inline within the ResourceHistogram
const project = new ProjectModel({
loadUrl: 'data/SchedulerPro/examples/view/ResourceHistogram.json',
autoLoad: true
});
// Initialize the ResourceHistogram
const histogram = new ResourceHistogram({
project: project,
appendTo: targetElement, // Append the histogram to the target DOM element
...resourcehistogramProps // Spread the previously defined props
});
}/>