CODEWITHSUNDEEP
javascriptajax
Jonathan Lyon
Jonathan Lyon

Reputation: 3952

how to update javascript function every minute and update chart?

I am trying to update my chart every minute and call the chart function. Not sure what I'm doing wrong. Can anyone help.

The page is here:-

http://www.api.jonathanlyon.com/m.html

Here is the code:-

        <!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="https://raw.github.com/oesmith/morris.js/0.3.2/morris.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<script>
window.setInterval(function(){

  chart()

}, 5000);
</script>

<script>
 morrisTemplate = {
      element: 'line-example',
      data: [
      ],
      xkey: 'x',
      xLabels: "hour",
      ykeys: ['volvo'],
      ymin: '0',
      labels: ['Volvo Fan Numbers']
    }


$(function chart(){

    $.ajax({
        url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
        success: function (data){
            toPlot = []
            $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                toPlot.push({x: item['date'] , volvo: item['newfans']   });
            });
            console.log("length:" + toPlot.length)
             toPlot.reverse()
            morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
            Morris.Line(morrisTemplate);
         },
    });


})

</script>


<body>
  <div id="line-example"></div>
</body>
</html>

Any help would be much appreciated.

Thanks

Jonathan

Upvotes: 2

Views: 3988

Answers (2)

dmi3y
dmi3y

Reputation: 3522

additionally you may split it like this

function chart(){
    $.ajax({
        url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
            success: function (data){
            toPlot = []
            $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                toPlot.push({x: item['date'] , volvo: item['newfans']   });
            });
            console.log("length:" + toPlot.length)
            toPlot.reverse()
            morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
            Morris.Line(morrisTemplate);
        }
    });
}



$(function () {
    chart();
});

This is not most beautiful solution as it makes dirt in global scope, but quick

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

The purpose of the outer $() is a shorthand for $(document).ready(). Go ahead and throw all your code into the jQuery wrapper to delay execution until the DOM is ready.

<script> 

$(function () {
    window.setInterval(chart, 5000);

    morrisTemplate = {
      element: 'line-example',
      data: [
      ],
      xkey: 'x',
      xLabels: "hour",
      ykeys: ['volvo'],
      ymin: '0',
      labels: ['Volvo Fan Numbers']
    }

    function chart(){
        $.ajax({
            url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
            success: function (data){
                toPlot = []
                $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                    toPlot.push({x: item['date'] , volvo: item['newfans']   });
                });
                console.log("length:" + toPlot.length)
                 toPlot.reverse()
                morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
                Morris.Line(morrisTemplate);
             },
        });

    }
});

</script>

Also, you need to include your scripts in either the head or (better) the end of the body tag. Including elements outside of those elements is not valid markup.

Upvotes: 3

Related Questions