Range with chart.js - Javascript Chart.js

Description

Range with chart.js
Demo Code

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w w  . ja  va  2s  . c o m*/
var sampleData = [{
        'y': 426777.1,
        'x': 18.123
    },
    {
        'y': 258927.7,
        'x': 46.8
    },
    {
        'y': 5419.3,
        'x': 1110.1
    },
    {
        'y': 5136.33830766,
        'x': 1138.878123
    }
];
var ctx = document.getElementById("line-chart").getContext('2d');
var config = {
    type: 'line',
    data: {
        datasets: [{
            data: sampleData,
            label: "Model",
            borderColor: "#3e95cd",
            fill: false
        }, {
            label: 'Data',
            fill: false,
            showLine: false,
            backgroundColor: "#FF0000",
            data: [{
                    x: 17.0,
                    y: 454995.091169
                },
                {
                    x: 1137.0,
                    y: 3369.7047454
                },
                {
                    x: 1138.0,
                    y: 3539.605825
                },
                {
                    x: 1140.0,
                    y: 4927.1313084
                }
            ],
            type: 'line'
        }]
    },
    options: {
        title: {
            display: true,
            text: "test"
        },
        scales: {
            xAxes: [{
                type: 'logarithmic',
                position: 'bottom'
            }],
            yAxes: [{
                type: 'logarithmic'
            }]
        }
    }
};
var forecast_chart = new Chart(ctx, config);
var slider = document.getElementById("myRange");
var output = document.getElementById("textInput");
slider.oninput = function() {
    document.getElementById('textInput').value = this.value;
   var tmpData= sampleData;
    for (var i = 0; i < tmpData.length; i++) {
      tmpData[i].y = parseInt(this.value) * tmpData[i].y;
    }
   forecast_chart.data.datasets[0].data = tmpData;
   forecast_chart.update();
}
    }

      </script> 
   </head> 
   <body> 
      <div id="Global"> 
         <div id="gauche"> 
            <canvas id="line-chart" width="800" height="450"></canvas> 
         </div> 
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br> 
         <div id="droite"> 
            <br> 
            <label class="width1">parameter_1 : </label> 
            <span class="width5">10</span> 
            <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange"> 
            <span class="width3">40</span> 
            <input class="width4" type="text" id="textInput" value=""> 
         </div> 
      </div>  
   </body>
</html>
Range with chart.js - Javascript Chart.js

Description

Demo Code

Related Tutorials
