Add a range to line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Add a range to line chart

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <title>char.js</title> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <link rel="stylesheet" href="style.css"> 
   </head> 
   <body> 
      <div id="Global"> 
         <div id="gauche"> 
            <canvas id="line-chart" width="800" height="450"></canvas> 
            <script>
var ctx = document.getElementById("line-chart").getContext('2d');
var config = {/*  w w  w.  ja v  a 2 s. co m*/
    type: 'line',
    data: {
        datasets: [{
            data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 5419.37148146,'x': 1110.14081215},
{'y': 5136.33830766,'x': 1138.878123}],
            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'
            }]
        }
    }
};
function updateValue_parameter_1(val) {document.getElementById('textInput').value="parameter_1 = "+val;}
var forecast_chart = new Chart(ctx, config);
jQuery("#myRange").click(function() {
    for(var az=0;az<=3;az++){
    config.data.datasets[0].data[az].y = val*config.data.datasets[0].data[az].y;
}
});

            </script> 
         </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" onchange="updateValue_parameter_1(this.value);"> 
            <span class="width3">40</span> 
            <input class="width4" type="text" id="textInput" value=""> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials