- Posts: 32
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Use of Chartjs Library
- develnick
- Topic Author
- Offline
- Junior Member
Less
More
5 years 2 weeks ago - 5 years 2 weeks ago #182860
by develnick
- Nick
Use of Chartjs Library was created 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
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: 5 years 2 weeks ago by develnick.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 2 weeks ago #182876
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
Sample survey attached:
Wrap the chart script in a $(document).on('ready pjax:scriptcomplete',function(){}); function so it is not fired until the page is completely loaded.
Code:
<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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.