How to create a graphical page modal as soon as the user clicks the submit button

I was filling in a google graph based on user input. Right now the graph is being created on the same page.

Here is a link to an image of my page: https://ibb.co/fAm7BQ

Below is my HTML code:

<form method="post">
  <label>CUF PERFORMANCE</label> &nbsp&nbsp&nbsp
  <select id="select" name="options">
    <option>Select The Value</option>
    <option id="hourly" value="a">Hourly</option>
    <option id="daily" value="b">Daily</option>
    <option id="monthly" value="c">Monthly</option>
    <option id="yearly" value="d">Yearly</option> 
  </select><br/><br/>

  <label id="from" style="display:none;">Enter starting Date and Time</label>

  <input id="dateInputone" name="dateipone" type="datetime-local" step="600" onblur="validate_time(this.value)" style="display:none;">

  <label id="to" style="display:none;">Enter Ending Date and Time</label>

  <input id="dateInputtwo" name="dateiptwo" type="datetime-local" step="600" style="display:none;">
  <br/><br/>
  <label for="Inverter">Inverter</label>
  <select name="ino">
    <option>Select The Value</option>
      <option value="1">Inverter 1</option>
    <option value="2">Inverter 2 </option>
      <option value="3">Inverter 3</option>
      <option value="4">Inverter 4</option> 
      <option value="5">Inverter 5</option> 
      <option value="6">Inverter 6</option>
  </select><br/><br/>

  <input type="submit" value="submit" onclick="myFunction()">

      

        
        
        
      

    

Below is my script code for google graphs

google.charts.load('current', {
  'packages': ['line', 'bar', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var arr1 = <?php echo json_encode($narray) ?>;
  var dataArray = [];
  for (i = 0; i < arr1.length; i++) {
    var implicitArray = [];
    implicitArray.push(arr1[i].timestamp);
    implicitArray.push(arr1[i].sum);
    implicitArray.push(arr1[i].sum / (6 * 72 * 245));
    dataArray.push(implicitArray);
  }

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Days');
  data.addColumn('number', "Grid Power Total");
  data.addColumn('number', "CUF");
  data.addRows(dataArray);

  var linematerialOptions = {
    chart: {
      title: 'CUF CALCULATION'
    },
    width: 400,
    height: 400,
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {
        axis: 'CUF'
      },

    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        CUF: {
          label: 'CUF'
        }
      }
    }
  };

  var linechart = new google.charts.Line(document.getElementById('chart_div'));
  linechart.draw(data, linematerialOptions);

  var barmaterialOptions = {
    width: 400,
    height: 400,
    series: {
      0: {
        axis: 'CUF'
      }, // Bind series 0 to an axis named 'distance'.
      1: {
        axis: 'Gridpowertotal'
      } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      y: {
        CUF: {
          label: 'CUF'
        }, // Left y-axis.
        Gridpowertotal: {
          side: 'right',
          label: 'Grid Power Total'
        } // Right y-axis.
      }
    }
  };
  alert(barmaterialOptions);
  var barchart = new google.visualization.BarChart(document.getElementById('chartdiv'));
  barchart.draw(data, google.charts.Bar.convertOptions(barmaterialOptions));
}

      

        
        
        
      

    

Here is the link to the image as I want it to be as soon as the user enters a value and hits submit: https://ibb.co/cbytkk