index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
    <link rel='stylesheet' href='css/style.css'/>

    <title>Prediction methods comparison</title>
</head>
<body>

<div id="controls">
    <form>
        <input id="dataset1" type="radio" name="dataSet" value="1" checked> data set 1 (small trend - des) <br>
        <input id="dataset2" type="radio" name="dataSet" value="2"> data set 2 (big trend - des) <br>
        <input id="dataset3" type="radio" name="dataSet" value="3"> data set 3 (season - 😫 )
    </form>
    <button id="bestFit" class="big-btn">best fit</button>
</div>

<div class="chart firstChart">
    <h2>Moving average prediction</h2>
    <p id="maMistake"></p>
    <p id="maAbsMistake"></p>
    <canvas id="maChart"></canvas>
</div>

<div class="chart">
    <h2>Weighted Moving average prediction</h2>
    <p id="wmaMistake"></p>
    <p id="wmaAbsMistake"></p>

    <div class="slideContainer">
        <p>Previous :   <span id="wmaPrevRate"></span>
           Previous 2 : <span id="wmaPrev2Rate"></span>
        </p>
        <input type="range" min="0" max="100" value="50" class="slider" id="wmaSlider">
    </div>

    <canvas id="wmaChart"></canvas>
</div>

<div class="chart">
    <h2>Exponential Smoothing prediction</h2>
    <p id="esMistake"></p>
    <p id="esAbsMistake"></p>

    <div class="slideContainer">
        <p>Alpha :   <span id="esAlpha"></span>
        </p>
        <input type="range" min="0" max="100" value="50" class="slider" id="esSlider">
    </div>

    <canvas id="esChart"></canvas>
</div>

<div class="chart">
    <h2>Double Exponential Smoothing prediction</h2>
    <p id="desMistake"></p>
    <p id="desAbsMistake"></p>

    <div class="slideContainer">
        <p>Alpha (level rate) :   <span id="desAlpha"></span>
        </p>
        <input type="range" min="0" max="100" value="50" class="slider" id="desSliderAlpha">

        <p>Beta (trend rate) :   <span id="desBeta"></span>
        </p>
        <input type="range" min="0" max="100" value="50" class="slider" id="desSliderBeta">
    </div>

    <canvas id="desChart"></canvas>
</div>


<script src="js/mychart.js"></script>
</body>
</html>