<!DOCTYPE html> <html>

<head>
        <meta charset="utf-8">
        <title>Solarium Power Generation Report</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script>
        <style>
                body {
                        padding: 20px;
                }
                hr {
                        margin-bottom: 50px;
                }
                .solarium-chart {
                        font-family: sans-serif;
                        font-size: 14px;
                        height: 500px;
                        width: 100%;
                }
        </style>
        <script type="text/javascript">
                window.onload = function() {
                        const datasets = {
                                'Generation': 'generation',
                                'Today':      'today',
                                'Past Week':  'week',
                                'Lifetime':   'lifetime',
                        }
                        Object.keys(datasets).forEach(function(title) {
                                const element = document.getElementById(`solarium-${datasets[title]}`);
                                new Dygraph(element, `${datasets[title]}.csv`, {
                                        fillGraph: true,
                                        labelsSeparateLines: true,
                                        legend: 'always',
                                        title: title,
                                });
                        });
                };
        </script>
</head>
<body>
        <div id="solarium-container">
                <div class="solarium-chart" id="solarium-generation"></div>
                <hr/>
                <div class="solarium-chart" id="solarium-today"></div>
                <hr/>
                <div class="solarium-chart" id="solarium-week"></div>
                <hr/>
                <div class="solarium-chart" id="solarium-lifetime"></div>
        </div>
</body>

</html>