<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        
        <title>Metrics Chart</title>
        <meta name="description" content="Metrics for functional tests">
        <meta name="author" content="Sebastian Kupke">

        <style>
            canvas {
                margin-bottom: 60px;
            }
        </style>

    </head>

    <body>

        <canvas id="chart1"></canvas>
        <canvas id="chart2"></canvas>
        <canvas id="chart3"></canvas>
        <canvas id="chart4"></canvas>

        <script src="./Chart.min.js"></script>
        <script src="./data.js"></script>

        <script>
            new Chart('chart1', {
                type: 'line',
                data: data[0],
                options: {
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[Seconds]'
                            }
                        }]
                    }
                }
            })

            new Chart('chart2', {
                type: 'line',
                data: data[1],
                options: {
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[Seconds]'
                            }
                        }]
                    }
                }
            })

            new Chart('chart3', {
                type: 'line',
                data: data[2],
                options: {
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[Seconds]'
                            }
                        }]
                    }
                }
            })

            new Chart('chart4', {
                type: 'line',
                data: data[3],
                options: {
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[Seconds]'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[MegaByte]'
                            }
                        }]
                    }
                }
            })
        </script>
    </body>
</html>