Hello Bonita Team,
I just downloaded version 7 Community Version and I’m having some issues creating custom widget. I want to create a bar chart widget, but I’m unsure what I’m doing incorrectly. When I add the widget to the existing form getting empty container.
I’m using Chart.js as asset.
I’m using static data first to just try to get the widget to work.
Template
Controller
function LineCtrl($scope) {
$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
}
}
1 Like
Hi,
You should not re-declare a controller in your widget template (we already do that for you) so you will need to drop that part:
ng-controller=“LineCtrl”
Then, your controller code will just need to be updated as following:
function ($scope) {
// your controller code
}
Hope this helps,
Removed declarations. Still getting a “Missing Name in function declaration”.
The widget looks better on the form designer, however, still not showing up on the form at execution. Is there something else I have to include? I’m unsure how to upload images to demonstrate.
Please share an updated version of your widget code and template.
I note that in your previous version you had an extra closing bracket at line 13.
@mtdonovan
This is not an error message. I have the same message on my custom widget but it is just a warning.
The custom wigdet works even if there is this message.
Template
Controller
function ($scope) {
$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
}
This is still not working. please help.
Hi,
Could you check with a developer console (press F12 on most browsers):
- if you have some JS errors at runtime or when previewing the widget in a form?
- if your assets are correctly loaded
Also, I just noticed that but you should also use the Angular Chart library to add AngularJS support to Chart.js.
Cheers,
I double checked that both dependencies were included.
Issue found: module syntax was not correct. Included chart.js under Required angular modules
Hi,
If your provide these settings, it will work (note: the chart is only rendered in preview window or at runtime):
Template
Controller
function ($scope) {
$scope.labels = [“January”, “February”, “March”, “April”, “May”, “June”, “July”];
$scope.series = [‘Series A’, ‘Series B’];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}
Assets (order is important)
angular-chart.css
Chart.min.js
angular-chart.min.js
Required angular modules
chart.js
Hope this helps,
Thanks.
I only had Chart.js without the other assets.
Did you use external link or did you include all the file in your process ?
I will try with all this asset.
I used local assets.
As I earlier wrote in this post, you really need the “Angular Charts” library to enable the support of “Chart js” library with AngularJS.
Cheers,
Now it works.
I noticed that you need to include Chart.min.js before angular-chart.min.js.
Hi
Could Anyone Export the Widget and share it.
I have tried the Above example but I dont see any Preview. Its blank.
I was hoping to review the Final widget to see where I made the Mistake.
Also Please share the Asset files required as well.
thanks.