Use of Chartjs Library

More
4 months 2 weeks ago - 4 months 2 weeks ago #182860 by develnick
Hi! I'd like to implement a radar chart in my survey, like this.

jsfiddle.net/mascarock/h36dfuac/25/


I tried to write this code in my question source code, but I get a blank page (see the image).

My survey is attached



- Nick
Attachments:
Last edit: 4 months 2 weeks ago by develnick.

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
4 months 2 weeks ago #182876 by tpartner
Replied by tpartner on topic Use of Chartjs Library
The problem is that your target canvas does not exist before your firing of the chart script.

Wrap the chart script in a $(document).on('ready pjax:scriptcomplete',function(){}); function so it is not fired until the page is completely loaded.

<script type="text/javascript" src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<script type="text/javascript" src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script type="text/javascript">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
 
		var presets = window.chartColors;
		var utils = Samples.utils;
		var inputs = {
			min: 8,
			max: 16,
			count: 8,
			decimals: 2,
			continuity: 1
		};
 
		function generateData() {
			// radar chart doesn't support stacked values, let's do it manually
			var values = utils.numbers(inputs);
			inputs.from = values;
			return values;
		}
 
		function generateLabels() {
			return utils.months( { 
      count: inputs.count }
      );
		}
 
		utils.srand(42);
 
		var data = {
			labels: generateLabels(),
			datasets: [{
				backgroundColor: utils.transparentize(presets.red),
				borderColor: presets.red,
				data: generateData(),
				label: 'D0'
			}, {
				backgroundColor: utils.transparentize(presets.orange),
				borderColor: presets.orange,
				data: generateData(),
				hidden: true,
				label: 'D1',
				fill: '-1'
			}, {
				backgroundColor: utils.transparentize(presets.yellow),
				borderColor: presets.yellow,
				data: generateData(),
				label: 'D2',
				fill: 1
			}, {
				backgroundColor: utils.transparentize(presets.green),
				borderColor: presets.green,
				data: generateData(),
				label: 'D3',
				fill: false
			}, {
				backgroundColor: utils.transparentize(presets.blue),
				borderColor: presets.blue,
				data: generateData(),
				label: 'D4',
				fill: '-1'
			}, {
				backgroundColor: utils.transparentize(presets.purple),
				borderColor: presets.purple,
				data: generateData(),
				label: 'D5',
				fill: '-1'
			}]
		};
 
		var options = {
			maintainAspectRatio: true,
			spanGaps: false,
			elements: {
				line: {
					tension: 0.000001
				}
			},
			plugins: {
				filler: {
					propagate: false
				},
				'samples-filler-analyser': {
					target: 'chart-analyser'
				}
			}
		};
 
		var chart = new Chart('chart-0', {
			type: 'radar',
			data: data,
			options: options
		});
 
		// eslint-disable-next-line no-unused-vars
		function togglePropagate(btn) {
			var value = btn.classList.toggle('btn-on');
			chart.options.plugins.filler.propagate = value;
			chart.update();
		}
 
		// eslint-disable-next-line no-unused-vars
		function toggleSmooth(btn) {
			var value = btn.classList.toggle('btn-on');
			chart.options.elements.line.tension = value ? 0.4 : 0.000001;
			chart.update();
		}
 
		// eslint-disable-next-line no-unused-vars
		function randomize() {
			inputs.from = [];
			chart.data.datasets.forEach(function(dataset) {
				dataset.data = generateData();
			});
			chart.update();
		}	
	});
</script>
<div class="content">
	<div class="wrapper" style="max-width: 920px; margin: auto">
		<canvas id="chart-0"></canvas>
	</div>
</div>

Sample survey attached:

File Attachment:

File Name: limesurvey...8318.lss
File Size:19 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!