Use of Chartjs Library

Plus d'informations
il y a 4 mois 2 semaines - il y a 4 mois 2 semaines #182860 par develnick
Use of Chartjs Library a été créé par 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
Pièces jointes :
Dernière édition: il y a 4 mois 2 semaines par develnick.

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 4 mois 2 semaines #182876 par tpartner
Réponse de tpartner sur le sujet 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:

Fichier attaché :

Nom du fichier : limesurvey...8318.lss
Taille du ficher :19 ko

Cheers,
Tony Partner

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

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!