Yes you are right. The @using statement which writes our your form is executed on the server - the Javascript variable is only present on the client. Therefore you will have to use a hidden field inside the form and populate that field with the value of your javascript variable. You need to do that once the document has loaded or somewhere below the hidden field.
Example:
@using (Html.BeginForm("Index", "Contrl1", FormMethod.Post))
{
<input type="hidden" name="SPName" id="SPName" />
<button id="plot" type="submit" class="btn" > Plot </button>
}
Then, use JS to populate the hidden field:
JQuery version:
<script>
$(function(){
$('#SPName').val(myJSVarcomeshere);
});
</script>
Plain JS version:
<script>
window.onload = function() {
document.getElementById('SPName').value = myJSVarcomeshere;
};
</script>