Creating and Updating Graph in HTML and Javascript

Question

I have a website that calls to a function that randomly picks a number to 2 decimal places e.g.

(5.53)

Here is that code:

randomnum = Math.floor(Math.random() * (1000 - 100) + 100) / 100;

(this gives me a value between 1 and 10 to 2 decimal places)

The website then counts to this number in increments of 0.01 and when it reaches the value it stops and then loops creating another random number and starts counting again.

if (randomnum < c) {
    c = 0;
    stopCount() }

(c is the counter value which increments by 0.01 every 20ms)

I'm trying to create a line graph that shows the increments and updates, THIS IMAGE IS FOR A VISUAL AID ONLY, I DO NOT HAVE A WORKING VERSION.

This code below is what i'm currently using to get the general shape, I did not originally create this code. here is a link to the source im using. http://www.chartjs.org/docs/latest/charts/line.html

function renderchart() {
var ctx = document.getElementById("bettingarea").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
    labels: [ "1", "2", "3", "4",],
    datasets: [{
        label: 'Crash Graph',
        data: [5.44, 5.67, 5.94, 6.12,],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:false
            }
        }]
    }
}
});
}

The same website has this http://www.chartjs.org/docs/latest/developers/updates.html

Which I cannot seam to get working no matter what i do :(

I suppose what i'm asking is if there is a easier way of doing this, and if not please can you help get this updatedata set function working

Thank you for any help provided :)

UPDATE: custom pseudocode (I imagine it working like so)

GENERATE RANDOM = randomnum
START TIMER
UPDATE canvasgraph TO x.seconds AND y.timer
TIMER = TIMER + 0.01 
IF TIMER > randomnum
THEN STOP.timer
END LOOP
ELSE 
CONTINUE TIMER
START LOOP AGAIN

this is a really basic form of the code, and only acts as a visual aid for people trying to visualize the code, also I know i'm not using correct pseudocode terminology

Yep sorry It was a mistake on my part, I was merely attempting to clean the question up so that users visiting could clearly see the relevant code as the code posted was for personal use. The rest will remain — T.script
– T.script, Commented Aug 18, 2017 at 13:29

ɢʀᴜɴᴛ · Accepted Answer · 2017-08-18 11:54:44Z

3

If I understand correctly, then you are after something like this :

var myLineChart, c = 0, label = 0, randomnum, interval;

function renderchart() {
   var ctx = document.getElementById("bettingarea").getContext('2d');
   myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: ["1", "2", "3", "4"],
         datasets: [{
            label: 'Crash Graph',
            data: [5.44, 5.67, 5.94, 6.12],
            backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(75, 192, 192, 0.2)',
               'rgba(153, 102, 255, 0.2)',
               'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
               'rgba(255,99,132,1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(75, 192, 192, 1)',
               'rgba(153, 102, 255, 1)',
               'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
         }]
      },
      options: {
         scales: {
            yAxes: [{
               ticks: {
                  beginAtZero: false
               }
            }]
         }
      }
   });
}

function updateChart(chart) {
   randomnum = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
   chart.data.labels = [];
   chart.data.datasets[0].data = [];
   interval = setInterval(function() {
      if (c < randomnum) {
         c += 0.01;
         label++;
         //update chart
         chart.data.labels.push(label.toString());
         chart.data.datasets[0].data.push(+c.toFixed(2));
         chart.update();
      } else {
         clearInterval(interval);
         c = 0;
         label = 0;
         //updateChart(myLineChart) /* maybe call this function again */
      }
   }, 20);
}

window.onload = renderchart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="bettingarea"></canvas><br>
<button onclick="updateChart(myLineChart)">Update Chart</button>

correct me if I am wrong :)

answered Aug 18, 2017 at 11:54

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ɢʀᴜɴᴛ Over a year ago

BTW, here labels are steps taken to reach that random number, when incremented by 0.01

T.script Over a year ago

So this is a really good start: However there are a couple of problems, My website links to a javascript that generates a random number that starts a timer counting to that generated number: This loops over and over and uses the variable names (randomnum and c), so these cannot be used. so maybe this code can be changed to display the timer(c) in the data. It appears you have used the variable names to update the graph

T.script Over a year ago

I'll update the original post to include more of my code to help

ɢʀᴜɴᴛ Over a year ago

Actually I'm not entirely sure what you're trying to achieve here. First clarify the way chart updates at the moment (on given snippet) is correct or not, then we'll go further..

T.script Over a year ago

yeah I understand, Thank you so much for the help. Have a nice day

|

Collectives™ on Stack Overflow

Creating and Updating Graph in HTML and Javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related