This is fairly easy to do, but you are going to have to change the type of chart you are drawing. This is because scatter charts do not support the isStacked option which allows you to use the percent stacked display. It's just not in the list of scatter chart options -
https://developers.google.com/chart/interactive/docs/gallery/scatterchart#configuration-options as it is in things like the column charts -
https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options. I also tried it on some of my own charts and it does not work.
I suppose you could calculate the points yourself and draw that data, but it is probably easier to reconsider the type of chart you are drawing.
What you need is something like a button, dropdown or something similar to let the users switch between what they want to see. You can use the onChange event of the switch to signal the code to redraw the chart with the new values.
Here's a dropdown I used to choose between a normal, stacked and percent column chart:
<select id="chooseChart" onchange="studentSex.redrawChart()">
<option value="Column">Column</option>
<option value="Stacked">Stacked</option>
<option value="Percent">Percent</option>
</select>
and here's the function I used to redraw the chart:
function redrawChart(){
var chartType = document.getElementById("chooseChart").value;
var optionVar = false;
if (chartType == "Stacked") {optionVar = true}
if (chartType == "Percent") {optionVar = 'percent'}
var options = {isStacked: optionVar};
var chart = new google.visualization.ColumnChart(document.getElementById('studentData_div'));
chart.draw(studentData, options);
}
The page also shows how to change between different types of chart, I used a column and bar chart in my example. There's no reason you can't combine both the type of chart and whether it is stacked ot not in one go.