Multiple Graphs on one page

I have a website displaying inplay stats from football matches, I have a large number of stats and want to try and get away from just line after line of numbers in a table. Im using jquery datatables and have added a drop down for each row of data with more stats. In this drop down I would like a canvas.js radar graph

The problem is I cant find a way round having to initialise each chart with lots of code and that code would then be repeated on every line of the table, as a busy time that could be over 100 matches

below is the code of what I want to achieve but I want that in every row of a datatable, ideally I would like to initialise the graphs once and just have a single line of code in my datatable with the numbers

Any ideas ?

<!doctype html>
<html>

<head>

    <title>Radar Chart</title>
    <script src="dist/2.8.0/Chart.min.js"></script>
    <script src="utils.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<button id="save-btn">Save Chart Image</button>
    <div style="width:40%">
        <canvas id="canvas"></canvas>
    </div>

    <script>
        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var color = Chart.helpers.color;
        var config = {
            type: 'radar',
            data: {
                labels: [['Shots on', ' Target'], ['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'],
                datasets: [{
                    label: 'Home team',
                    backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.red,
                    pointBackgroundColor: window.chartColors.red,
                    data: [
                        '5',
                        '7',
                        '4',
                        '6',
                        '2'
                    ]
                }, {
                    label: 'Away Team',
                    backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.blue,
                    pointBackgroundColor: window.chartColors.blue,
                    data: [
                        '2',
                        '1',
                        '3',
                        '5',
                        '0'
                    ]
                }]
            },
            options: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'In Play Stats'
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        };

        window.onload = function() {
            window.myRadar = new Chart(document.getElementById('canvas'), config);


        };






    </script>
</body>

</html>

Solution

One way I could think of is creating a function, if all of your charts are similar and only few parameters change, for example in the following example I've considered chartId, labels, dataset and title to be varying. You can also aim to write function that creates datasets given certain parameters:

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
window.chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};
var color = Chart.helpers.color;
var labels = [
  ['Shots on', ' Target'],
  ['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'
];
var datasets = [{
  label: 'Home team',
  backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
  borderColor: window.chartColors.red,
  pointBackgroundColor: window.chartColors.red,
  data: ['5', '7', '4', '6', '2']
}, {
  label: 'Away Team',
  backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
  borderColor: window.chartColors.blue,
  pointBackgroundColor: window.chartColors.blue,
  data: ['2', '1', '3', '5', '0']
}];

window.onload = function() {
  window.myRadar = createChart('canvas', labels, datasets, 'In Play Stats');
};

function createChart(chartId, labels, dataset, title) {
  return new Chart(document.getElementById(chartId), {
    type: 'radar',
    data: {
      labels: labels,
      datasets: dataset
    },
    options: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: title
      },
      scale: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:40%; min-width: 700px;">
  <canvas id="canvas" style="width: 700px;"></canvas>
</div>