how to save user input data and render chart to different html pages using canvas js using local storage?

Question

I want to be able to save the user's input table for alpha beta and gamma value so that when you click on submit button it automatically directs you to a different HTML page where the charts render on different pages.please provide me the steps to render charts on different html pages when i save some values in my table. I am able to render chart on same page but need to render on different pages. Thanks in advance..

  <style>
        data {
            color: #136bc2;
        }
    </style>
    <body>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
   <div id="aditablediv">
   <p>
   <input type="button" id="bt" value="Submit Data" onclick="submit()" />
   </p>
   <input type="button" onclick="insRow()" id="addadibutton" value="Add values"/><br/><br/>
   <table id="adiTable" border="1">
   <thead>
       <tr>
           <td>WEEK NO</td>
           <td>alpha</td>
           <td>beta</td>
           <td>gamma</td>
           <td>Delete?</td>

       </tr>
       </thead>
       <tbody>
       <tr>
           <td><input size=25 type="text" id="weekbox"/></td>
           <td><input size=25 type="text" id="latbox"/></td>
           <td><input size=25 type="text" id="lngbox"/></td>
           <td><input size=25 type="text" id="lnbox"/></td>
           <td><input type="button" id="deladibutton" value="Delete" onclick="deleteRow(this)"/></td>

       </tr>
       <tbody>
   </table>
   <canvas id="barChart"></canvas>
   </body>
   <script>
   function deleteRow(row)
    {
        var i=row.parentNode.parentNode.rowIndex;
        if(i>1){
        document.getElementById('adiTable').deleteRow(i);
        }

    }


    function insRow()
    {

        var x=document.getElementById('adiTable');
        var new_row = x.rows[1].cloneNode(true);
        var len = x.rows.length;
        new_row.cells[0].childNodes[0].value = "";

        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';
        x.appendChild( new_row );
        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.id += len;
        inp3.value = '';
        x.appendChild( new_row );
    }
   function submit() 
   {
     var table = document.getElementById("adiTable")
     var tableLen = table.rows.length           
     var data = {labels: [], alpha: [], beta: []}

   for (var i = 1; i < tableLen; i++) 
  {
     data.labels.push(table.rows[i].cells[0].childNodes[0].value)
     data.alpha.push(table.rows[i].cells[1].childNodes[0].value)
     data.beta.push(table.rows[i].cells[2].childNodes[0].value)
  }
    var canvasP = document.getElementById("barChart")
    var ctxP = canvasP.getContext('2d')
    var mybarChart = new Chart(ctxP, {type: 'bar',
    data: 
        { 
            labels: data.labels,
            datasets: [
      {label: "alpha", data: data.alpha, borderColor: "ORANGE"},
      {label: "beta", data: data.beta, borderColor: "GREEN"}
    ]
        },
        options: {
            legend: {
            display: true,
            position: "right"
            }
        }
    });

Answer 1

These two methods can help. More reference here

localStorage.setItem('myCat', 'Tom');
const sth = localStorage.getItem('myCat');

how to save user input data and render chart to different html pages using canvas js using local storage?

Question

1 answers

solution1
0 2020-05-18 16:03:56

how to save user input data and render chart to different html pages using canvas js using local storage?

Question

1 answers

solution1 0 2020-05-18 16:03:56

solution1
0 2020-05-18 16:03:56