index.html

<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="row navbar navbar-dark bg-dark">
    <div class="col">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="customFile">
            <label id="filename"class="custom-file-label" for="customFile">history.json auswählen</label>
        </div>
    </div>
    <div class="col">
        <button id="import" class="btn btn-success float-right" >Verarbeiten</button>
    </div>
</div>

<div class="row" style="margin-left: 0px;">
    <div id="myChart" style="width:100%; max-width:900px; height:200px;"></div>
</div>

<div class="row" style="margin-left: 0px;">
    <div id="histogram" style="width:100%; max-width:900px; height:500px;"></div>
</div>

<div class="row">
    <div class="col">
        <div id="TypeChart" style="width:100%; max-width:500px; height:500px;">
        </div>
    </div>
    <div class="col">
        <div id="CityChart" style="width:100%; max-width:500px; height:500px;">
        </div>
    </div>
</div>
<div class="row">
    <div class="col">
        <table class="table table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Zug Typ</th>
                    <th>Anzahl Fahrten</th>
                    <th>Anteil in %</th>
                </tr>
            </thead>
            <tbody  id="traintypetable">
                
            </tbody>
        </table>
    </div>

    <div class="col">
        <table class="table table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Stadt</th>
                    <th>Anzahl Fahrten</th>
                    <th>Anteil in %</th>
                </tr>
            </thead>
            <tbody id="citytable">
            </tbody>
        </table>
    </div>
</div>

<p>Ver. 1.0.1</p>