Use of Chartjs Library

Mehr
2 Wochen 3 Tage her - 2 Wochen 3 Tage her #182860 von develnick
COM_KUNENA_MESSAGE_CREATED_NEW
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
Anhang:
Last edit: 2 Wochen 3 Tage her by develnick.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

LimeSurvey Partners
Mehr
2 Wochen 2 Tage her #182876 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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:

Dateianhang:

Dateiname: limesurvey...8318.lss
Dateigröße:19 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha