Google Visualization Line chart not able to show custom points

Question

I am trying to show a line graph between Overs and Runs scored in each over by two teams.

function drawChart() {
season = document.getElementById('ipl_Seasons');
var jsonData = $.ajax({
    url: "******************************=" + season.value,
    dataType: "json",
    crossDomain: true,
    async: false
}).responseText;

var parsed = JSON.parse(jsonData);

var arr = [];

var validation = {

    isNumber: function (str) {
        var pattern = new RegExp('^[0-9]+$');
        return pattern.test(str);  // returns a boolean
    }
};

for (var x in parsed) {
    arr.push(parsed[x]);
}

var elementById = document.getElementById('matches_Number');

if (elementById !== null && validation.isNumber(elementById.value)) {

    var matchByIDandSeason = elementById.value;
    var finalMatch = arr[parseInt(matchByIDandSeason) - 1];
    var mapOfOversAndRunsForFirstInnings = {};
    var mapOfOversAndRunsForSecondInnings = {};
    var matchDetails = finalMatch.matchDetails;
    var perOverRuns = 0;
    for (var i = 0; i < matchDetails.length; i++) {
        if (matchDetails[i].inning === 1) {
            if(matchDetails[i].over in mapOfOversAndRunsForFirstInnings){
                mapOfOversAndRunsForFirstInnings[matchDetails[i].over] = parseInt(mapOfOversAndRunsForFirstInnings
                        [matchDetails[i].over])+matchDetails[i].total_runs;
            }else {
                perOverRuns = 0;
                perOverRuns =  matchDetails[i].total_runs + perOverRuns;
                mapOfOversAndRunsForFirstInnings[matchDetails[i].over] = perOverRuns;
            }
        } else {
            if(matchDetails[i].over in mapOfOversAndRunsForSecondInnings){
                mapOfOversAndRunsForSecondInnings[matchDetails[i].over] = parseInt(mapOfOversAndRunsForSecondInnings
                        [matchDetails[i].over])+matchDetails[i].total_runs;
            }else {
                perOverRuns = 0;
                perOverRuns =  matchDetails[i].total_runs + perOverRuns;
                mapOfOversAndRunsForSecondInnings[matchDetails[i].over] = perOverRuns;
            }
        }
    }


    var dataArray = [['Overs', finalMatch.team1, finalMatch.team2]];
    var firstInningRun = 0;
    var secondInningRun = 0;
    var chartDataForTeam1 = [];
    var chartDataForTeam2 = [];
    for (var overs = 1; overs <= 20; overs++) {
        chartDataForTeam1.push(mapOfOversAndRunsForFirstInnings[overs]);
        chartDataForTeam2.push(mapOfOversAndRunsForSecondInnings[overs]);
        dataArray.push([overs, 0, 0]);
    }

    var materialOptions = {
        chart: {
            title: 'Cricket Performance'
        },
        width: 900,
        height: 500,
        hAxis: {
            gridlines: {count: 10},
            minValue : 1,
            maxValue : 20,
            title: 'Overs'
        },
        vAxis: {
            minValue : 1,
            title: 'Runs'
        },
        animation: { duration: 250 }
    };


    var data = new google.visualization.arrayToDataTable(dataArray);
    var chart = new google.visualization.ColumnChart(document.getElementById('columns_chart_div'));

    var team1Index = 0;
    var team2Index = 0;

    var drawChart = function() {


        if (team1Index < 20) {
            data.setValue(team1Index, 1, chartDataForTeam1[team1Index++]);
            chart.draw(data, materialOptions);
        }

        if(team2Index < 20){
            data.setValue(team2Index, 2, chartDataForTeam2[team2Index++]);
            chart.draw(data, materialOptions);
        }


    };

    google.visualization.events.addListener(chart, 'animationfinish', drawChart);
    chart.draw(data, materialOptions);
    drawChart();
}

}

This is what it results to. But the default point setting is to show the data from x and y coordinates. I want to show a third data series with wickets fallen in each innings in the line chart drawn instead of the point. Like they show in cricket graph.

Is there a way to achieve this, through google visualization api or any other api? And please also let me know what other visualization apis I can use to show cricket graphs.

UPDATE - Example

Answer 1

use a ComboChart to combine both line and scatter series,

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Overs');
  data.addColumn('number', 'Chargers - Runs');
  data.addColumn('number', 'Royals - Runs');
  data.addColumn('number', 'Chargers - Wickets');
  data.addColumn('number', 'Royals - Wickets');

  data.addRows([
    [0, 0, 0, null, null],
    [2, 22, 14, 18, null],
    [3, 30, 18, null, null],
    [4, 32, 35, null, 30],
    [5, 48, 60, 50, null],
    [6, 58, 72, null, 70]
  ]);

  var options = {
    chartArea: {
      top: 12,
      right: 12,
      bottom: 36,
      left: 24,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      title: 'Overs'
    },
    legend: {
      position: 'none'
    },
    series: {
      0: {  // Chargers - Runs
        color: '#d32f2f'
      },
      1: {  // Royals - Runs
        color: '#1e88e5'
      },
      2: {  // Chargers - Wickets
        color: '#d32f2f',
        pointSize: 8,
        type: 'scatter'
      },
      3: {  // Royals - Wickets
        color: '#1e88e5',
        pointSize: 8,
        type: 'scatter'
      }
    },
    seriesType: 'line',
    vAxis: {
      title: 'Runs'
    }
  };

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

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