Javascript Charts As Input

I have a requirement as below. I need to input time series data (day data) using a graph. The data is usually like below but the profile can be changed depending upon the situatio

Solution 1:

see following working snippet, click on the chart to add a data point...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "x", "type": "number"},
        {"label": "y", "type": "number"}
      ]
    });

    var axisMax = 10;
    var ticks = [];
    for (var i = 0; i <= axisMax; i = i + 0.5) {
      ticks.push(i);
    }

    var options = {
      chartArea: {
        bottom: 64,
        height: '100%',
        left: 64,
        top: 24,
        width: '100%'
      },
      hAxis: {
        format: '0.0',
        textStyle: {
          fontSize: 9
        },
        ticks: ticks,
        title: data.getColumnLabel(0),
        viewWindow: {
          min: 0,
          max: axisMax
        }
      },
      height: 600,
      legend: {
        position: 'top'
      },
      pointSize: 4,
      vAxis: {
        format: '0.0',
        textStyle: {
          fontSize: 9
        },
        ticks: ticks,
        title: data.getColumnLabel(1),
        viewWindow: {
          min: 0,
          max: axisMax
        }
      }
    };

    var tableDiv = document.getElementById('table_div');
    var table = new google.visualization.Table(tableDiv);
    var chartDiv = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(chartDiv);
    var chartLayout = null;

    google.visualization.events.addListener(chart, 'ready', function () {
      chartLayout = chart.getChartLayoutInterface();
    });
    google.visualization.events.addListener(chart, 'click', function (sender) {
      data.addRow([
        chartLayout.getHAxisValue(sender.x),
        chartLayout.getVAxisValue(sender.y)
      ]);
      drawChart();
    });

    functiondrawChart() {
      chart.draw(data, options);
      table.draw(data);
    }

    window.addEventListener('resize', drawChart, false);
    drawChart();
  },
  packages:['corechart', 'table']
});

div {
  text-align: center;
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div><divid="table_div"></div>