- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-13-2024 04:00 AM
With the help of the community, I created the following widgets.
HTML
<div>
<canvas id="radar" class="chart chart-radar" chart-data="data" chart-labels="labels" chart-option="option"></canvas>
</div>
Client
api.controller=function($scope) {
/* widget controller */
var c = this;
$scope.labels = ['ColA', 'ColB', 'ColC', 'ColD', 'ColE', 'ColF']
$scope.data=$scope.data.record;
$scope.option=$scope.data.options;
};
Server
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var gr = new GlideRecord($sp.getParameter('table'));
gr.get($sp.getParameter('sys_id'));
data.record=[[gr.getValue("cola"),gr.getValue("colb"),gr.getValue("colc"),gr.getValue("cold"),gr.getValue("cole"),gr.getValue("colf")]];
data.options={
scale:{
ticks:{
beginAtZero: true,
max: 10
}
}
};
})();
In this widget, the maximum value of the chart should be 10, but the maximum value of the actual chart is the highest value of the record.
I don't think the options I set are being applied, but if anyone knows of a solution, please let me know.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-16-2024 05:25 AM
I solved it by using highcharts instead of chartjs.
HTML
<div>
<!-- your widget template -->
<div id="report"></div>
</div>
Client
api.controller=function($scope) {
/* widget controller */
var c = this;
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'report',
polar: true,
type:"line"
},
title: {
text: 'demo',
x: -80
},
xAxis: {
categories: $scope.data.categories,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max:10
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: $scope.data.series
});
};
Server
(function() {
data.categories=['a', 'b', 'c','d','e','f'];
data.series=[{
'name': 'demo report',
'pointPlacement': 'on',
'data': [1,2,3,4,5,6]
}]
})();
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-16-2024 05:25 AM
I solved it by using highcharts instead of chartjs.
HTML
<div>
<!-- your widget template -->
<div id="report"></div>
</div>
Client
api.controller=function($scope) {
/* widget controller */
var c = this;
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'report',
polar: true,
type:"line"
},
title: {
text: 'demo',
x: -80
},
xAxis: {
categories: $scope.data.categories,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max:10
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: $scope.data.series
});
};
Server
(function() {
data.categories=['a', 'b', 'c','d','e','f'];
data.series=[{
'name': 'demo report',
'pointPlacement': 'on',
'data': [1,2,3,4,5,6]
}]
})();