JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<div class="tab-content">
  <div class="tab-pane active" id="wellbeing" role="tabpanel">
    <div class="card-body">
      <div class="panel form-inline" style="margin-bottom:15px;">
        <div class="form-group">
          <label>Questionnaire: </label>
          <select id="questionnaires">
            <option value="c11445b0-9b3e-42e6-a58e-098360ae37a0" selected="">Recovery 360</option>
            <option value="38bdf603-63ca-4fd6-9cba-424f858b5930">Highlands Group Test1</option>

          </select>
        </div>
        <div class="form-group">
          <label>History: </label>
          <select id="days">
            <option value="7">Last 7 Days</option>
            <option value="14">Last 14 Days</option>
            <option value="21">Last 21 Days</option>
            <option value="28">Last 28 Days</option>

          </select>
        </div>
        <div class="form-group">
          <label>Export : </label>
          <button onclick="downloadpdf();" class="btn btn-sm btn-success">Download PDF</button>
        </div>
      </div>
      <hr>
      <div id="images">
        <img id="image_0" src="" />
        <img id="image_1" src="" />
        <img id="image_2" src="" />
        <img id="image_3" src="" />
        <img id="image_4" src="" />
        <img id="image_5" src="" />
        <img id="image_6" src="" />
        <img id="image_7" src="" />
        <img id="image_8" src="" />
        <img id="image_9" src="" />
        <img id="image_10" src="" />

      </div>
      <div id="results">
        <div id="results-page-0">
          <div id="results-page-mobile-0">
            <div class="question">
              Felt Hungry?
            </div>
            <div class="chart">
              <div class="chartjs-size-monitor">
                <div...

CSS

canvas {
  background-color: white;
}

JavaScript

var answers = [];
var charts = 11;
var days = [];
days.push('Wed 28');
days.push('Thu 29');
days.push('Fri 30');
days.push('Sat 31');
days.push('Sun 01');
days.push('Mon 02');
days.push('Tue 03');


function renderCharts() {


  var itemAnswersArray = {
    graphObject: true,
    hydration: false,
    lowValue: 1 == 999999 ? null : 1,
    highValue: 5 == 999999 ? null : 5,
    answers: []
  };
  itemAnswersArray.answers.push("3" == "999999" ? null : "3")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  answers.push(itemAnswersArray)
  var itemAnswersArray = {
    graphObject: true,
    hydration: false,
    lowValue: 1 == 999999 ? null : 1,
    highValue: 5 == 999999 ? null : 5,
    answers: []
  };
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
  itemAnswersArray.answers.push("5" == "999999" ? null : "5")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  answers.push(itemAnswersArray)
  var itemAnswersArray = {
    graphObject: true,
    hydration: false,
    lowValue: 1 == 999999 ? null : 1,
    highValue: 5 == 999999 ? null : 5,
    answers: []
  };
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("4" == "999999" ? null : "4")
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
  itemAnswersArray.answers.push("2" == "999999" ? null : "2")
 ...