CODEWITHSUNDEEP
javascripthighcharts
HyperDevil
HyperDevil

Reputation: 2639

Highcharts: multiple charts and one update function

I cannot seem to figure out on how i have multiple charts and update these with one update function.
I have a HTML file, in that file i have this:

<script type="text/javascript" src="highchart/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="highchart/highcharts.js"></script>
<script type="text/javascript" src="highchart/highcharts-more.js"></script>
<script type="text/javascript" src="windspeed.js"></script>
<script type="text/javascript" src="livedata.js"></script>

windspeed.js:

$(function () {
    var windspeed = new Highcharts.Chart({
        chart: {
            renderTo: 'windspeed',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        }, 
etc.
}

livedata.js:

$(function (livedata) {
        setInterval(function() {
        $(function() {
        $.getJSON('livedata.php', function(data) {
            $.each(data, function(key,val) {
            if (key == 'WindSpeed')
            {
            var point = windspeed.series[0].points[0];
                point.update(val);
            }
            });
        });
        })
    },2000)
    }
);

The charts pops up but the data is not updated, get this error: Unable to get value of the property '0': object is null or undefined
I assume this has something to do that the livedata.js cannot see the windspeed variables since it's in a different scope.
Can someone show me how i can get this to work?

Upvotes: 1

Views: 2154

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You don't have access to the variables outside $(function()), they are local:

$(function () {
    var windspeed = new Highcharts.Chart({
        ...
    });
    var windspeed2 = new Highcharts.Chart({
        ...
    });
    var windspeed3 = new Highcharts.Chart({
        ...
    });
});

You can move them out of this scope:

var windspeed, windspeed2, windspeed3;
$(function () {
    windspeed = new Highcharts.Chart({
        ...
    });
    windspeed2 = new Highcharts.Chart({
        ...
    });
    windspeed3 = new Highcharts.Chart({
        ...
    });
});

So now, they are globals, so you have access to them in other files too.

Upvotes: 3

Related Questions