Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Html graphic with variable

aalfonsoc
Topic Author
Offline
New Member

More

5 years 3 weeks ago #219502 by aalfonsoc

Html graphic with variable was created by aalfonsoc

no run

We need to make a graphic with the answer of other a previus question ({DTresult} = 10 example)
<x-xpr type="question">{DTresult}</x-xpr>

How do I write line: " <div class="bar" style="--bar-value:{DTresult}%;" data-name="Answer" title="Answer"></div>"?

Code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Gráfico de barrasL</title>

    <style>

    .chart-wrap {

        --chart-width:420px;

        --grid-color:#aaa;

        --bar-color:#F16335;

        --bar-thickness:40px;

        --bar-rounded: 3px;

        --bar-spacing:10px;

        font-family:sans-serif;

        width:var(--chart-width);

    }

    .chart-wrap .title{

        font-weight:bold;

        padding:1.8em 0;

        text-align:center;

        white-space:nowrap;

    }

    /* cuando definimos el gráfico en horizontal, lo giramos 90 grados */

    .chart-wrap.horizontal .grid{

        transform:rotate(0deg);

    }

    .chart-wrap.horizontal .bar::after{

        /* giramos las letras para horizontal*/

        transform: rotate(0 deg);

        padding-top:0px;

        display: block;

    }

    .chart-wrap .grid{

        margin-left:50px;

        position:relative;

        padding:5px 0 5px 0;

        height:100%;

        width:100%;

        border-left:2px solid var(--grid-color);

    }

    /* posicionamos el % del gráfico*/

    .chart-wrap .grid::before{

        font-size:0.8em;

        font-weight:bold;

        content:'0%';

        position:absolute;

        left:-0.5em;

        top:-1.5em;

    }

    .chart-wrap .grid::after{

        font-size:0.8em;

        font-weight:bold;

        content:'100%';

        position:absolute;

        right:-1.5em;

        top:-1.5em;

    }

    /* giramos las valores de 0% y 100% para horizontal */

    .chart-wrap.horizontal .grid::before, .chart-wrap.horizontal .grid::after {

        transform: rotate(0deg);

    }

    .chart-wrap .bar {

        width: var(--bar-value);

        height:var(--bar-thickness);

        margin:var(--bar-spacing) 0;

        background-color:var(--bar-color);

        border-radius:0 var(--bar-rounded) var(--bar-rounded) 0;

    }

    .chart-wrap .bar:hover{

        opacity:0.7;

    }

    .chart-wrap .bar::after{

        content:attr(data-name);

        margin-left:100%;

        padding:10px;

        display:inline-block;

        white-space:nowrap;

    }
var x =  <x-xpr type="question">{DTresult}</x-xpr>;
var y = 50;
    </style>

</head>

<body>

<div class="chart-wrap horizontal"> <!-- quitar el estilo "horizontal" para visualizar verticalmente -->

  <div class="title">Tus resultados <p><x-xpr type="question">{DTresult}</x-xpr></p></div>

  <div class="grid">

      <div class="bar" style="--bar-value:[b]{DTresult}[/b]%;" data-name="Answer" title="Answer"></div>

  </div>

</div>

</body>

</html>

The topic has been locked.

Joffm
Away
LimeSurvey Community Team

More

5 years 3 weeks ago #219512 by Joffm

Replied by Joffm on topic Html graphic with variable

Hi, as I do not understand wwhat you are trying to do, I show you what I do usually.
I use the library "highchart"
Here tw examples:
1. Show the results of all previous respondents in a question (here in version 3.x. with plugin "getStatInSurvey"; in 5.x. this is in core.

Code:

<div id="chart1" style="float:left;width:100%;height:250px;"> </div>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript" charset="utf-8">
Highcharts.setOptions({
    colors: ['#1CC4CC', '#275BCC', '#6C96CC', '#3618CC', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

// Create the chart
Highcharts.chart('chart1', {
  chart: {
    type: 'column',
    backgroundColor: 'transparent'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    categories: [
      'sehr gut',
      'gut',
      'mittel',
      'schlecht'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Anzahl'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    column: {
      pointPadding: 0.1,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Total',
    colorByPoint: true,
    data: [{' [Q2.nb.1]'},{' [Q2.nb.2]'},{' [Q2.nb.3]'},{' [Q2.nb.4]'}]
  }]
});

2. Show a score of this particular respondent.