Change section element every 20 seconds

Question

How I though I could do this will not work after I researched it. I have 2 elements on a page a graph using the chart.js framework and a table with data in it. The chart data only changes once a day, and the retrieval of the data is slow so it only needs to be changed once. On the other hand I want to go through a set of different line graphs which will change every x number of seconds. I was thinking of using an iframe to do that but iframes are for documents not html elements. Upon further research I found that jquery might be the best in doing this, but have none to little experience in jquery.

My question is it possible with jquery to have an array location IDs and use those to load the next graph on the page every x number of seconds this is how my graph section is formatted

<section id="graph">
    <div class="container col-xs-12 col-sm-12 col-md6 col-lg-7 col-xl-12">
        <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <h3 class="text-center text-uppercase">Graph X</h3>
        </div>
        <canvas id="canvas"></canvas>
        <div class="text-center text-uppercase text-info">
            <h5>X values correspond to the hours of the day starting from
          ______ ending with _____</h5>
        </div>
        <script>
            function getHours(days) {
                var data = [];
                var hour = 0;
                for (i = 0; i < (25 * days); i++) {
                    if (hour > 24) {
                        hour = 0;
                        data.push(hour);
                        hour = hour + 1;
                    } else {
                        data.push(hour);
                        hour = hour + 1;
                    }
                }
                return data;
            }

            function getData() {
                return data;
            }

            function gennum() {
                document.write((Math.random() * (50 - 10) + 10)
                    .toFixed(2));
            }
            var randomScalingFactor = function() {
                return Math.round(Math.random() * 100)
            };
            var lineChartData = {
                labels: getHours(2),
                datasets: [{
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,1)",
                        strokeColor: "rgba(105,105,105,1)",
                        pointColor: "rgba(255,0,0,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: getData(),
                    },

                ]

            }

            window.onload = function() {
                var ctx = document.getElementById("canvas").getContext(
                    "2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    scaleShowGridLines: true,
                    responsive: true,
                    datasetFill: true,
                    scaleShowGridLines: true,
                    scaleGridLineColor: "rgba(105,105,105,.5)",
                    bezierCurveTension: .25,

                });
            }
        </script>
    </div>
</section>

Or any other suggestions on how to do this would be much appreciated.

This is almost entirely off-topic, but refreshing/changing a graph every 20 seconds sounds like a potential UI problem, rather than a useful solution. — David Thomas, Aug 05 '15 at 17:55

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Basically, to run function in x seconds, use setTimeout

setInterval( function () {                        
    //do magic here every 2seconds
}, 2000);

And for updating chart.js data refer to this answer

edited May 23 '17 at 12:21

Community

1
1

answered Aug 05 '15 at 18:03

Medet Tleukabiluly

11,662
3
34
69

Change section element every 20 seconds

1 Answers1