Google Visualization线图无法显示自定义点

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>