I want to set the maximum value of the radar chart using chartjs

Junnosuke Yamam
Mega Guru

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.

1 ACCEPTED SOLUTION

Junnosuke Yamam
Mega Guru

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]
}]
})();

 

View solution in original post

1 REPLY 1

Junnosuke Yamam
Mega Guru

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]
}]
})();