Chartjs for Line chart, values on y-axis

Question

I'm trying to make a line graph with data from a mySQL database. I refresh the page every 10 minutes automatically with new data, now the values on the y-axis are based on the data and can change over time when the data changes. I would like the y-axis with a standard minimum of 0 and a maximum of 100. I tried to introduce more options, but I don't get it to work.

    <canvas id="c" width="500" height="500">grafiek kan niet laden</canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script>
        var ctx = document.getElementById("c").getContext("2d");
        var data = {
          labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
          datasets: [
            {
            fillColor: "#ffccef", // kleur onder de lijn
            strokeColor: "rgba(250,127,163,1)", // lijn kleur
            pointColor: "rgba(200,100,150,1)", // puntjes op grafiek
            pointStrokeColor: "#fff",
            data: RH1 
          },
          {
            fillColor: "#ffb3b3", // kleur onder de lijn
            strokeColor: "rgba(255,127,163,1)", // lijn kleur
            pointColor: "rgba(800,10,10,1)", // puntjes op grafiek
            pointStrokeColor: "#fff",
            data: temp1 
          }
          ]               
        };

        var MyNewChart = new Chart(ctx).Line(data);


    </script>

Thorin · Accepted Answer · 2016-06-03T10:23:25.170

0

That depends on your data if your data has a maximum number you just

currentDataNumber/MaximumDataNumber * 100 = percentageRelativeToMaximum;

In simple words you should convert your data to percentages. This is possible on a number of ways. If you were to give an example of you data sheet I could i give a better solution.

If it varies you find the highest number in your data. If a new highest number is introduced it wil change the entire graph.

Code in comment:

window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { scaleOverride : true, scaleSteps : 10, scaleStepWidth : 10, scaleStartValue : 0 }); }

edited Jun 03 '16 at 10:23

answered Jun 03 '16 at 09:03

Thorin

69
7

Thank you for your reply. RH1 will always be between 0 and 100 and temp1 will always between 0 and 100 as well. I would like the y-axis always to start at 0 and end at 100, regardless of the data. Is this possible? At this moment RH1 is Array ( [0] => 23 [1] => 20 [2] => 21 [3] => 18 [4] => 10 [5] => 25 [6] => 18 [7] => 18 [8] => 18 ). And temp1 is Array ( [0] => 20 [1] => 18 [2] => 16 [3] => 23 [4] => 25 [5] => 25 [6] => 17.5 [7] => 20.5 [8] => 18 ). – Loes Visser Jun 03 '16 at 09:46
You have to override the scale window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { scaleOverride : true, scaleSteps : 10, scaleStepWidth : 10, scaleStartValue : 0 }); } Source: http://stackoverflow.com/questions/28990708/chartjs-how-to-set-max-and-min-value-for-y-axis – Thorin Jun 03 '16 at 10:22
Thank you very much! I searched on this forum for the answer, but did not see that question (and answer). I'm sorry for the inconvenience :) – Loes Visser Jun 03 '16 at 10:44

Chartjs for Line chart, values on y-axis

1 Answers1