Creating Custom Widget
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
<div ng-controller="LineCtrl" class="chart_contr" style="margin-left: auto;margin-right: auto;margin-top: 10%;width: 300px;padding:0px 10px;">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" width="400" height="400" click="onClick"></canvas>
</div>
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" width="400" height="400" click="onClick"></canvas>
</div>
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);
};
}
}
$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);
};
}
}
Comments
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
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" width="400" height="400" click="onClick"></canvas>
</div>
Controller
$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):
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
I try your code with the chart.js asset and I have this beautiful error :
...of e?JSON.stringify(e):e;c+=d(e)}return Error(c)}}function Ta(b){if(null==b||Ua(...
Hi,
If your provide these settings, it will work (note: the chart is only rendered in preview window or at runtime):
Template
Controller
$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)
Chart.min.js
angular-chart.min.js
Required angular modules
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.
thanks its work for me
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.