XYPlotter

Second project for ICS 314

by butterfreeDay

HTML

<!-- Taryn Takebayashi -->
<!DOCTYPE html>
<html>
    <head>
        <title>XY Plotter</title>
        <!-- The following link is what is used to include the
        Chart.js functions
        -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded',init);
            //this function will clear all of the children of an element
            function removeChildren(elem){
                while(elem.childNodes.length > 0){
                    elem.removeChild(elem.childNodes[0]);
                }
            }
            //this function obtains the user input data and
            //calls the doChart() function to make the chart
            function getDataAndPlot() {
                let data1 = [];
                const label = document.getElementById("label");
                let label1 = label.value.trim();
                const myChart = document.getElementById("myChart");
                removeChildren(myChart);
                const textarea = document.getElementById("textarea");
                let xydata = textarea.value.split("\n");
                //console.log(xydata);
                for (let i = 0; i < xydata.length; i++) {
                    let splitValue = xydata[i].split(",");
                    let row = {};
                    row["x"] = Number(splitValue[0]);
                    row["y"] = Number(splitValue[1]);
                    data1.push(row);
                }
                //console.log(data1);
                doChart(data1,label1);
            }
            function init() {
                const run = document.getElementById("run");
                run.addEventListener("click",getDataAndPlot);
            }
            //this doChart() function uses Chart.js to create a
            //xy scatter chart
            function doChart(data1,label1) {
                let ctx =...