Use of Chartjs Library

Mehr
4 Monate 2 Wochen her - 4 Monate 2 Wochen her #182860 von develnick
Use of Chartjs Library wurde erstellt von 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
Anhänge:
Letzte Änderung: 4 Monate 2 Wochen her von develnick.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

LimeSurvey Partners
Mehr
4 Monate 2 Wochen her #182876 von tpartner
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.
Official LimeSurvey Partner - partnersurveys.com
Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

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