There is a simple chart on Google Charts:

<script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Time', 'First', 'Second'], ['00', 4, 4], ['01', 7, 7], ['02', 6, 6], ['03', 5, 6] ]); var options = { title: 'Chart online', hAxis: {title: 'Время', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script>

And there is a form:

 <form name="in"> <input name="data"> <input type="button" value="ok" onClick="ab();"> </form>

How can I transfer the results of input to an array with data for drawing a graph? Thank.

    2 answers 2

    Here is the second implementation on which the lines are not added, but they change:

     <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); let chart; let data; let options; function drawChart() { data = google.visualization.arrayToDataTable([ ['Time', 'First', 'Second'], ['00', 4, 4], ['01', 7, 7], ['02', 6, 6], ['03', 5, 6] ]); options = { title: 'Chart online', hAxis: {title: 'Время', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } function drawChartRow(){ let row_id = parseInt(document.querySelector("input[name='Time']").value); let row_Time = document.querySelector("input[name='Time']").value; let row_First = parseInt(document.querySelector("input[name='First']").value); let row_Second = parseInt(document.querySelector("input[name='Second']").value); if(row_id >= data.qg.length){ data.addRows([ [row_Time, row_First, row_Second] ]); } else{ data.removeRow(row_id); data.insertRows(row_id, [[row_Time, row_First, row_Second]]); } chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); return false; } </script> </head> <body> <div id="chart_div"></div> <form name="in"> <input name="Time" value="00" /> <input name="First" value="10" /> <input name="Second" value="8" /> <input type="button" value="ok" onclick="drawChartRow()"> </form> </body> </html>

    The removeRow insertRows methods are used removeRow . That is, we delete a line and in place of it we add a new one with new values.

    The key of the code is that if in the input form you write an existing number, then the row will be updated and if the number is greater than what is on the chart, it will add a new row using the addRows method.

    And for an empty graphic, initialize google charts api like this with zero values:

     data = google.visualization.arrayToDataTable([ ['Time', 'First', 'Second'], ['00', 0, 0], ['01', 0, 0], ['02', 0, 0], ['03', 0, 0] ]);
    • @Pavel so you need it? - Raz Galstyan

    Good day. Here is my example of the implementation of the plan.

    Explain what I did. In Google Charts there is a method addRows . When I clicked the submit button form, I called the addRows method and added a new line to the graphics options. But in order for it to be visible in the graph, you need to re-initialize the graph. And in order not to lose the old data, I made the variables in the drawChart() function global. and after each click on submit , a new line is added to the old options and the schedule is initialized with a new one.

     <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); let chart; let data; let options; function drawChart() { data = google.visualization.arrayToDataTable([ ['Time', 'First', 'Second'], ['00', 4, 4], ['01', 7, 7], ['02', 6, 6], ['03', 5, 6] ]); options = { title: 'Chart online', hAxis: {title: 'Время', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } function drawChartRow(){ data.addRows([ [document.querySelector("input[name='Time']").value, parseInt(document.querySelector("input[name='First']").value), parseInt(document.querySelector("input[name='Second']").value) ] ]); chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); return false; } </script> </head> <body> <div id="chart_div"></div> <form name="in"> <input name="Time" value="04" /> <input name="First" value="10" /> <input name="Second" value="8" /> <input type="button" value="ok" onclick="drawChartRow()"> </form> </body> </html>

    • Thank you very much for the answer. You decided this by adding new columns, but is there a way not to add new ones and to assign new values ​​to old ones? That is, the situation when the number of columns is fixed by business logic is simply that this graph shows activity during the day, and so there will be as many hours in days as we add ... - Pavel
    • one
      I'll try and implement it. - Raz Galstyan
    • I will be very grateful, it’s time for me to look for a mentor for js ... - Pavel
    • one
      @Pavel do you want to change always a specific string or all rows? - Raz Galstyan
    • Yes, I want to change only one line. I enter what code I want to change and the point in time to which I change. For example, for 1 hour for First I set such a value. And I have 24 hours on the chart, regardless of zaponenosti. If nothing is filled, then just an empty chart, I’ve still faced with the fact that if there is no data on the graph, then it is not drawn at all until it fails to overcome this problem. - Pavel