How to put vertical lines on google chart scatter

Question

How I can make vertical lines on a scatter google chart?

I need to put the red line vertically:

here is my current code:

      //making array with data
      var dataArray = [];
      dataArray.push(["", "", { role: 'annotation' }, "", ""]);
      projects.forEach(function(item, index){
        dataArray.push([parseFloat(item["bottomData"]), parseFloat((item["leftData"])), index+1, 10, 15]);
      });
      var data = google.visualization.arrayToDataTable(dataArray);

      //define ticks
      var rangeX = data.getColumnRange(0);
      var ticksX = [];
      for (var i = (Math.floor(rangeX.min / 5) * 5); i <= (Math.ceil(rangeX.max / 5) * 5); i = i + 5) {
        ticksX.push(i);
      }

      var rangeY = data.getColumnRange(1);
      var ticksY = [];
      for (var i =(Math.floor(rangeY.min/5) * 5); i <= Math.ceil(rangeY.max/5) * 5; i=i+5) {
        ticksY.push(i);
      }

      //define options
      var options = {
          series: {
              1: {
                  lineWidth: 2,
                  pointSize: 0,
                  color: 'green'
              },
              2: {
                  lineWidth: 2,
                  pointSize: 0,
                  color: 'red'
              },
          },
          colors:['002060'],
          vAxis: {
              ticks: ticksY,  
          },
          hAxis: {
              ticks: ticksX,
          },
      };

      //print chart
      var chart = new google.visualization.ScatterChart(document.getElementById("chartDiv"));
      chart.draw(data, options);

I also tried using multiple axes putting some with direction=-1 or orientation=vertical but it doesn't work

Answer 1

in order to mix line series with scatter,
you will need to use a ComboChart

and to get vertical lines,
you will need to add multiple rows with the same x axis value,
with values for the min and max y axis values.

in the options, set the seriesType to 'scatter'
and change the series type to 'line'

see following working snippet...

google.charts.load('current', {
    packages:['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([
        ['x', 'y0', {role: 'annotation', type: 'number'}],
        [26, 1, 1],
        [33, 5, 2],
        [36, 1, 3],
        [38, 6, 4],
        [58, 1, 5]
    ]);

    var ticksX = [25, 30, 35, 40, 45, 50, 55, 60];
    var ticksY = [0, 5, 10, 15, 20, 25];

    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');

    //red line (vertical)
    ticksY.forEach(function (value) {
      data.addRow([40, null, null, null, value]);
    });

    //green line (horizontal)
    ticksX.forEach(function (value) {
      data.addRow([value, null, null, 10, null]);
    });

    data.sort([{column: 0}]);

    var options = {
        interpolateNulls: true,
        seriesType: 'scatter',
        series: {
            1: {
                color: 'green',
                type: 'line'                
            },
            2: {
                color: 'red',
                type: 'line'
            },
        },
        colors:['002060'],
        vAxis: {
            ticks: ticksY
        },
        hAxis: {
            ticks: ticksX
        },
    };

    var chart = new google.visualization.ComboChart(document.getElementById("chartDiv"));
    chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartDiv"></div>