Vanilla Javascript won't render #5289

DcsMarionDickten · 2022-12-19T10:48:35Z

I've got a html file with very basic layout (I removed all CSS to make sure it wasn't the problem) and a Javascript section that draws a very simple pie chart. In the browser it looks fine, and I can't make out any errors in the page. Yet wkhtmltopdf won't draw the pie. What am I doing wrong? Or how can I debug this?

I am on a Mac, OS version 11.6, wkhtmltopdf 0.12.6 (with patched qt).

<!DOCTYPE html>

<html lang="de">
<head>
  <meta charset="utf-8">
  <title>My pie chart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-param" content="authenticity_token" />
  <meta name="csrf-token" content="..." />

</head>

<body>
<div id="admin-main" class="container-fluid">
 
<script type="text/javascript">
    let chartColors =  ["#172363", "#145745", "#25779D", "#28A5A9", "#3D9DD1", "#3DD1A2", "#4DC8D5", "#87E3BB", "#8BE4E1", "#C2F0C1", "#C1EDF0"];
    let fontColors = ['white','white','white', 'white','white','black','black','black','black','black','black'];
    function getPoint(c1,c2,radius,angle) {
        return [c1 + Math.cos(angle) * radius, c2 + Math.sin(angle) * radius];
    }
    function drawPie(context, legend_div, results){
        // Thanks to Sandra Moringa (https://www.section.io/engineering-education/javascript-canvas-piechart/)
        let ctx = document.getElementById(context).getContext("2d");
        let legend = document.getElementById(legend_div);
        ctx.font = 'normal 18px Arial';

        let totalNumberOfAnswers = results.reduce((sum, {total}) => sum + total, 0);
        let currentAngle = 0;

        for (let entry of results) {
            //calculating the angle the slice (portion) will take in the chart
            let portionAngle = (entry.total / totalNumberOfAnswers) * 2 * Math.PI;
            //drawing an arc and a line to the center to differentiate the slice from the rest
            ctx.beginPath();
            ctx.arc(150, 150, 150, currentAngle, currentAngle + portionAngle);
            let labelPoint = getPoint(150,150,70, currentAngle + portionAngle / 2);
            currentAngle += portionAngle;
            ctx.lineTo(150, 150);
            //filling the slices with the corresponding color
            ctx.fillStyle = entry.shade;
            ctx.fill();
            if (entry.total != 0) {
                ctx.fillStyle = entry.textcolor;
                ctx.fillText(entry.total, labelPoint[0], labelPoint[1]);
            };
            // Die Labels neben der Chart mit ihrer Beschriftung:
            let el = document.createElement('span');
            el.innerText = entry.answer;
            el.style.borderLeft = "35px solid " + entry.shade;
            el.style.padding = "0 10px";
            el.style.color = 'black';
            el.style.margin = "10px";
            el.style.display = "inline-block";
            legend.appendChild(el);
            legend.appendChild(document.createElement('br'));

        }

    }

</script>

<div class="row">
  <div class="col-12 mb20 mt30">
    <div>
      <div class="tq_questiontext">
        <h5>
          Testfrage. Soll X oder Y sein? (01.09.2022 &mdash; 30.10.2022) <span style="color:red"></span>
        </h5>
        <div>Branche(n): Möbelhaus</div>
      </div>
    </div>
  </div>
</div>
<div class="row tq_row">
    <div class="col-12 mb20">
      <table class="table reports-table">
        <thead>
        <tr>
          <th>
            Antwortmöglichkeit
          </th>
          <th>
            Anzahl Antworten
          </th>
          <th>%</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ich weiß nicht</td>
            <td>0</td>
            <td>0,0%</td>
          </tr>
          <tr>
            <td>X ist schön!</td>
            <td>3</td>
            <td>75,0%</td>
          </tr>
          <tr>
            <td>Y ist schöner!</td>
            <td>1</td>
            <td>25,0%</td>
          </tr>
        <tr>
          <td>
            <strong>Gesamt:</strong>
          </td>
          <td>
            <strong>4</strong>
          </td>
          <td><strong>100,0%</strong></td>
        </tr>
        </tbody>
      </table>
      <div id="tq_container" style="width:100%;margin-top:50px;" >
        <table style="border-collapse:collapse;width:100%;border:none;">
          <tr>
            <td style="text-align: right;" width="60%">
              <canvas id="erstezelle" width="350" height="300" style="color:black;"></canvas>
            </td>
            <td id="zweitezelle"></td>
          </tr>
        </table>

        <script>
              drawPie('erstezelle', 'zweitezelle', [
                      {answer: "Ich weiß nicht", total: 0, shade: chartColors[0], textcolor: fontColors[0]}, 
                      {answer: "X ist schön!", total: 3, shade: chartColors[2], textcolor: fontColors[2]}, 
                      {answer: "Y ist schöner!", total: 1, shade: chartColors[4], textcolor: fontColors[4]}, ]);
          </script>
      </div>
    </div>
</div>

</div>


</body>

</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vanilla Javascript won't render #5289

Vanilla Javascript won't render #5289

DcsMarionDickten commented Dec 19, 2022

Vanilla Javascript won't render #5289

Vanilla Javascript won't render #5289

Comments

DcsMarionDickten commented Dec 19, 2022