<!doctype html>
<html>

<head>
    <title>Legend Positions</title>
    <script src="../../dist/Chart.bundle.js"></script>
    <script src="../utils.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        .chart-container {
            width: 500px;
            margin-left: 40px;
            margin-right: 40px;
        }
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="chart-container">
            <canvas id="chart-legend-top"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="chart-legend-right"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="chart-legend-bottom"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="chart-legend-left"></canvas>
        </div>
    </div>
    <script>
        var color = Chart.helpers.color;
        function createConfig(legendPosition, colorName) {
            return {
                type: 'line',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [{
                        label: "My First dataset",
                        data: [
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor()
                        ],
                        backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
                        borderColor: window.chartColors[colorName],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    legend: {
                        position: legendPosition,
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value'
                            }
                        }]
                    },
                    title: {
                        display: true,
                        text: 'Legend Position: ' + legendPosition
                    }
                }
            };
        }

        window.onload = function() {
            [{
                id: 'chart-legend-top',
                legendPosition: 'top',
                color: 'red'
            }, {
                id: 'chart-legend-right',
                legendPosition: 'right',
                color: 'blue'
            }, {
                id: 'chart-legend-bottom',
                legendPosition: 'bottom',
                color: 'green'
            }, {
                id: 'chart-legend-left',
                legendPosition: 'left',
                color: 'yellow'
            }].forEach(function(details) {
                var ctx = document.getElementById(details.id).getContext('2d');
                var config = createConfig(details.legendPosition, details.color);
                new Chart(ctx, config)
            })
        };
    </script>
</body>

</html>
