First apologies for any typos and such, as I am visually impAIRED.

I have a page created that allows a user to create a chart using sliders. The idea is they can then download the chart as a PNG image, or send via an email to themselves.

I've managed to get the download option working as per the below code (apologies for the state it is in, as it is a work in progress).

The issue I am having is that I can't get it to send via an email. I've tried using the mailto html option as a temporary solution, but that failed and also using a plugin (currently Forminator), which unfortuantely will not speak to the code.

I'm fairly novice at this, usually handling css only, so this is causing a bit of a headache.

<div class="sliders">
    <div class="slidecontainer">
        <div class="slideLabel">End of Poverty</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider1" style="width:75%"></div>
    </div>
    <div class="slidecontainer" <div="">Education</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider2" style="width:75%"></div>
    <div class="slidecontainer">
        <div class="slideLabel">Health</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider3" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Humanity and Communities</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider4" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Arts, Culture, Heritage, Science</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider5" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Amateur Sport</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider6" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">End of Mortal Conflict</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider7" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Care for the Environment</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider8" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Old/Young, Disabled, Hardship</div>
        <div><input type="range" min="0" max="100" value="1" class="slider dark" id="slider9" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Armed Forces, Emergency Services</div>
        <div><input type="range" min="0" max="100" value="1" class="slider dark" id="slider10" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Animal Welfare</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider11" style="width:75%"></div>
    </div>
    <div class="slidecontainer">
        <div class="slideLabel">Religion</div>
        <div><input type="range" min="0" max="100" value="1" class="slider light" id="slider12" style="width:75%"></div>
    </div>      
    </div>
    
            <div id="piechart"></div>
            <div id="chart_img"></div>
    <!-- Tab links -->
    <div class="tab" style="display:none">
      <button class="tablinks" onclick="openChart(event, 'Pie')">Pie</button>
      <button class="tablinks" onclick="openChart(event, 'Bar')">Chart</button>
    </div>
    <!-- Tab content -->
    <div id="Pie" class="tabcontent active">
        <div id="piechartxxx"></div>
    </div>
    <div id="Bar" class="tabcontent">
        <div id="barchart"></div>
    </div>  

And the javascript:

$(document).ready(function() {
    $(".slider").change(function () {
        drawChart();
    });

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

    // Draw the chart and set the chart values
    function drawChart() {        
        var dataChart = new google.visualization.DataTable();
        dataChart.addColumn('string', 'Measure'); // Implicit domain label col.
        dataChart.addColumn('number', 'Score'); // Implicit series 1 data col.
        dataChart.addRows([

        ['Poverty Prevention or Relief',parseInt($("#slider1").val())],
        ['Education',parseInt($("#slider2").val())],
        ['Health and Saving of Lives',parseInt($("#slider3").val())],
        ['Citizenship, Community Development',parseInt($("#slider4").val())],
        ['Arts, Culture, Heritage, Science',parseInt($("#slider5").val())],
        ['Amateur Sport',parseInt($("#slider6").val())],
        ['Human Rights, Conflict Resolution, Religious or Racial Harmony, Equality, Diversity',parseInt($("#slider7").val())],
        ['Environmental Protection or Improvement',parseInt($("#slider8").val())],
        ['Relief of Those in Need: youth, age, ill-health, disability, financial hardship',parseInt($("#slider9").val())],
        ['Armed Forces, Police, Ambulance Services, Fire and Rescue Services',parseInt($("#slider10").val())],
        ['Animal Welfare',parseInt($("#slider11").val())],
        ['Religion',parseInt($("#slider12").val())]
    ]);    

      // Optional; add a title and set the width and height of the chart
      var pieOptions = {'title':'Your Prioritised Preferences', 'width':900, 'height':700,
                        colors: ['#FFFF00','#FF86C1','#C71585','#0000FF','#800080','#EE82EE','#FF0000','#7FFF00','#FFDAB9','#EEE8AA','#DDA0DD','#FFA500']};

      // Display the chart inside the <div> element with id="piechart"
      var my_img = document.getElementById('chart_img');
      var my_chart = new google.visualization.PieChart(document.getElementById('piechart'));      

      google.visualization.events.addListener(my_chart, 'ready', function () {
        my_img.innerHTML = '<a href="' + my_chart.getImageURI() +
            '" Title="Download the Pie Chart" download="MyPieChart.png">Download Chart</a>';
      });

      var barOptions = {
        height: 1000,
        colors: ['red', 'green'],
        title: 'How Much You Care',
        chartArea: {width: '80%'},
        hAxis: {
          title: 'Percent of 100',
          minValue: 0,
          maxValue: 100
        },
        vAxis: {
          title: 'Subject'
        }
      };

      var barChart = new google.visualization.BarChart(document.getElementById('barchart'));
      my_chart.draw(dataChart, pieOptions);
      barChart.draw(dataChart, barOptions);
    }
});

function openChart(evt, chartName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", " active");
  }
  document.getElementById(chartName).style.display = "block";
  evt.currentTarget.className += " active";
}