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 = ["1&#8209;0", "4&#8209;1", "4&#8209;1", "2&#8209;1", "4&#8209;1"];
var draws = ["0&#8209;0", "0&#8209;0", "1&#8209;1", "2&#8209;2", "1&#8209;1", "2&#8209;2"];
var losses = ["0&#8209;1", "0&#8209;1", "0&#8209;1", "1&#8209;2", "1&#8209;3"];
if (wins.length + draws.length + losses.length < 5) {
  $("#chartch2h").hide();
  return;
}

var homeWins = ["1&#8209;0", "2&#8209;1"];
var awayWins = ["1&#8209;4", "1&#8209;4", "1&#8209;4"];
var homeDraws = ["0&#8209;0", "1&#8209;1", "1&#8209;1"];
var awayDraws = ["0&#8209;0", "2&#8209;2", "2&#8209;2"];
var homeLosses = ["0&#8209;1", "0&#8209;1", "1&#8209;3"];
var awayLosses = ["1&#8209;0", "2&#8209;1"];
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: [7, 11, 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'
      }
    ]
  },
 ...