Make chart hidden when balance is 0-CodePudding

I'm working on a project which features a portfolio doughnut chart on the dashboard. Currently if you're a new user the dt-card is just an empty box. When you have balance it shows the chart

I want to make it that when you dont have balance it minimizes the <script> part to Make it look like this

and only shows a header saying "Your portfolio is empty.". I'll provide the current code of it right now.

<div >
  <!-- Card -->
  <div >
    <!-- Card Header -->
    <div >
      <!-- Card Heading -->
      <div >
        <h3 >
          <?php echo ("Your Portfolio") ?>
        </h3>
      </div>
      <!-- /card heading -->
    </div>
    <!-- /card header -->
    <!-- Card Body -->
    <div >
      <!-- Chart -->
      <canvas id="pie-chart"  data-fill="27" height="130" width="130"></canvas>
      <!-- /chart -->
    </div>
    <!-- /card body -->
  </div>
  <script src="<?php echo base_url('/assets/dist/js/Chart.min.js') ?>"></script>
  <script>
    var activedeposits = <?php echo $activeDeposits > 0 ? $activeDeposits : '0' ?>;
    var withdrawals = <?php echo $earningsInfo > 0 ? $earningsInfo : '0' ?>;
    new Chart(document.getElementById("pie-chart"), {
      type: 'doughnut',
      data: {
        labels: ["Deposited", "Earnings"],
        datasets: [{
          label: "Transactions",
          backgroundColor: ["#0862c9", "#71A5E1"],
          data: [activedeposits, withdrawals]
        }]
      }
    });
  </script>
  <!-- /card -->
</div>```

CodePudding user response：

Ideally what you need to make use of are Conditional statements that will determine what will be shown depending on the conditions you apply.

See this Conditional Statements in PHP code Between HTML Code