ChartJS Line Chart

Multiple Line Chart

by Rob Sedgwick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
  <canvas id="charty" width="600" height="400"></canvas>
</body>

CSS

canvas {
  background-color: #eee;
}

JavaScript

var wins = ["2&#8209;1", "1&#8209;0"];
	var draws = ["0&#8209;0", "1&#8209;1", "1&#8209;1"];
	var losses = ["1&#8209;2", "0&#8209;4"];
	if (wins.length + draws.length + losses.length < 5) {
	  $('#charty').hide();
	  return;
	}

	var homeWins = ["2&#8209;1", "1&#8209;0"];
	var awayWins = [];
	var homeDraws = ["1&#8209;1"];
	var awayDraws = ["0&#8209;0", "1&#8209;1"];
	var homeLosses = [];
	var awayLosses = ["2&#8209;1", "4&#8209;0"];
	var homeTeam = 'Ascoli';
	var awayTeam = 'Entella';

	var options2 = {
	  type: 'bar',
	  data: {
	    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
	    datasets: [{
	        label: '# of Votes',
	        data: [12, 19, 3, 5, 2, 3],
	        borderWidth: 1,
	        backgroundColor: 'red'
	      },
	      {
	        label: '# of Points',
	        data: [7, 11, 5, 8, 3, 7],
	        borderWidth: 1,
	        backgroundColor: 'blue'
	      },
	      {
	        label: '# of Dogs',
	        data: [17, 21, 15, 18, 23, 17],
	        borderWidth: 1,
	        backgroundColor: 'green'
	      }
	    ]
	  },
	  options: {
	    scales: {
	      yAxes: [{
	        ticks: {
	          reverse: false
	        }
	      }]
	    }
	  }
	}


	var options = {
	  type: 'bar',
	  data: {
	    labels: ['Combined', 'At ' + homeTeam, 'At ' + awayTeam],
	    datasets: [{
	        label: homeTeam + ' Win',
	        data: [wins.length, homeWins.length, awayWins.length],
	        borderWidth: 1,
	        backgroundColor: '#95CEFF'
	      },
	      {
	        label: 'Draw',
	        data: [draws.length, homeDraws.length, awayDraws.length],
	        borderWidth: 1,
	        backgroundColor: '#696969'
	      },
	      {
	        label: awayTeam + ' Win',
	        data: [losses.length, homeLosses.length, awayLosses.length],
	        borderWidth: 1,
	        backgroundColor: '#A9FF96'
	      }
	    ]
	  },
	  options: {
	    title: {
	      display: true,
	      text: homeTeam + ' v ' + awayTeam + ' Head to Head'
	    },
	    scales: {
	     ...