PHP Variable an HTML (Highcharts) übergeben

Question

Guten Tag,

ich möchte einen Testwert eines Tests auf einer nachgeschalteten Fragebogenseite als Datenpunkt für eine Säulendiagramm von Highcharts einfügen.
Auf der Seite, auf der der Test durchgeführt wird, registriere ich diese Variable mit:

registerVariable($points);

Nun möchte ich den Testwerten Perzentile zuordnen, um sie grafisch darzustellen, z.B. so:

$wert1;
$wert2;
if ($points >= 0 && $points < 5){
    $wert1 = '58';
    $wert2 = '67';
} elseif ($points >= 5 && $points < 10){
    $wert1 = '63';
    $wert2 = '72';
}

Die Variablen $wert1 und $wert2 sollen als Datenpunkte im folgenden Säulendiagramm (HTML) dienen:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
   
  </p>
</figure>


<style type="text/css">
.highcharts-figure, .highcharts-data-table table {
  min-width: 310px; 
  max-width: 800px;
  margin: 1em auto;
}

#container {
  height: 400px;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
</style>

<script type="text/javascript">
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Leistungsfeedback Anagrammtest (Perzentile)'
  },
  subtitle: {
    text: 'Vergleich <b>P104</b> und <b>P43</b>'
  },
  xAxis: {
    categories: [
      ''
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Perzentil'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'P104 (Ihr Wert)',
    data: [<?php echo (int) ($wert1) ?>]

  }, {
    name: 'P43',
    data: [<?php echo (int) ($wert2) ?>]

  }]
});
</script>

Wie Sie sehen können, habe ich versucht, die $wert1 und $wert2 mit <?php echo (int) ($wert1) ?> bzw. <?php echo (int) ($wert1) ?> abzurufen, allerdings wird das Säulendiagramm dann nicht ausgegeben und die Fragebogenseite erscheint leer.

Welche Möglichkeit gibt es, die Variablen von PHP in HTML zu transferieren?

Herzlichen Dank schon im Voraus für die Mühe!
Bleiben Sie gesund.

Answer 1

Wie Sie sehen können, habe ich versucht, die $wert1 und $wert2 mit <?php echo (int) ($wert1) ?> bzw. <?php echo (int) ($wert1) ?> abzurufen

Bitte verwenden Sie stattdessen Platzhalter:

 },
  series: [{
    name: 'P104 (Ihr Wert)',
    data: [%wert1%]
  }, {
    name: 'P43',
    data: [%wert2%]
  }]
});

Und darüber (!) der zugehörige PHP-Code:

if ($points >= 0 && $points < 5){
    $wert1 = '58';
    $wert2 = '67';
} elseif ($points >= 5 && $points < 10){
    $wert1 = '63';
    $wert2 = '72';
}
replace('%wert1%', (int)$wert1);
replace('%wert2%', (int)$wert2);

Comments

Perfekt, das funktioniert! Vielen Dank.