Need assistance adding an additional series to a Highcharts graph using a SharePoint list and PSServices

Question

I have a SharePoint list with a date column, a RedTeamScore column, and a BlueTeamScore column (see screenshot)

My Highcharts graph currently consist of a single series - RedTeamScore (see screenshot)

I'd like to add an additional series to my chart from the BlueTeamScore column.

Below is a snippet of my code

<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/SPServices.min.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/highcharts.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/moment.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {

 var yearmontharray = [];
 var valuesarray = [];

 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Scores",
  CAMLViewFields: "<ViewFields><FieldRef Name='Date' /><FieldRef Name='RedTeamScore' /></ViewFields>",
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Date"));
    var values = Math.round($(this).attr("ows_RedTeamScore"));

	var newyearmonth = moment(yearmonth).format("MMM-DD");
	
    yearmontharray.push(newyearmonth);
    valuesarray.push(values);
   });
   var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 80
            },
            title: {
                text: 'Team Scores',
                x: -20
            },
            subtitle: {
                text: 'Red and Blue Teams',
                x: -20
            },
            xAxis: {
                categories: yearmontharray,
				labels: {
				    rotation: -90
				}
            },
            yAxis: {
                title: {
                    text: 'Score'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'RedTeam',
                data: valuesarray
            }]
        });

  }
 });
 
 
  
});
</script>
<div id="container">
</div>

Answer 1

You could extend your series to:

series: [{
            name: 'RedTeam',
            data: valuesarray
        },{
            name: 'BlueTeam',
            data: valuesarray2
        }]

and import blue team data (3 new & 1 edited lines):

...
$(document).ready(function() {

 var yearmontharray = [];
 var valuesarray = [];
 var valuesarray2 = []; //new line

 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Scores",
  CAMLViewFields: "<ViewFields><FieldRef Name='Date' /><FieldRef Name='RedTeamScore' /><FieldRef Name='BlueTeamScore' /></ViewFields>", //edited line
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Date"));
    var values = Math.round($(this).attr("ows_RedTeamScore"));
    var values2 = Math.round($(this).attr("ows_BlueTeamScore")); //new line

    var newyearmonth = moment(yearmonth).format("MMM-DD");

    yearmontharray.push(newyearmonth);
    valuesarray.push(values);
    valuesarray2.push(values2); //new line
   });
...