Chartjs-How can I do a sensitivity range with chart.js?

by

0👍

I really don’t know what have you tried to do, but you had a lot of bugs there. I fixed all of the bugs, and here is the result:

<!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 = {
    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>

jsFiddle for the result.

0👍

Here is a fiddle of what I think you require: jsFiddle
I am not sure of your dataset as it’s a wide ranged dataset.

You need to listen to the oninput event on your slider and update the data of your chart accordingly. Here is the function that updates the graph:

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();
}

You could check the full code on jsFiddle.

0👍

I think I have successfully fixed the function of Prerak Sola and now the y-axis remains in a normal mode. I added the previous value, and I divide by this factor in each update:

slider.oninput = function() {
    document.getElementById('textInput').value = this.value;
    var tmpData= sampleData;

  if (this.prev_value === undefined) this.prev_value = 1;

    for (var i = 0; i < tmpData.length; i++) {
        tmpData[i].y = parseInt(this.value) * tmpData[i].y / this.prev_value;
    this.prev_value = parseInt(this.value);
    }

   forecast_chart.data.datasets[0].data = tmpData;
   forecast_chart.update();
}

Leave a comment