Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Html graphic with variable

  • aalfonsoc
  • aalfonsoc's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 9 months 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 9 months 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.
 

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source