Grenello Grenello - 2 months ago 20
HTML Question

EON Chart not visible on page load

I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.

Here is the HTML / JavaScript and the CSS.

Your help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>

<link rel="stylesheet" type="text/css" href="poolstyle.css">

<head>
</head>

<body>
<script type="text/javascript">

var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});

var GraphChannel = "xxx";
var h = true;

charttemp = eon.chart({

pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});



</script>

</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>

</body>

</html>


Here is the CSS:

.outer {
margin: 0 auto;
width:1500px;
}

.inner{
display: table;
float: left;
width: 30%;
}

Answer

Couple things going on here:

  • move your library references to inside the <head> tags
  • but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>  
    <script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>

<body>
<div class="outer">
    <div id="charttemp" class="inner"> </div> 
    <div id="charthumidity"  class="inner"> </div>
    <div id="chartlight"  class="inner"> </div> 
</div>

    <script type="text/javascript">
        var pubnub = PUBNUB.init ({
            publish_key: 'pubkey', subscribe_key: 'subkey',
            error: function (error) {console.log('Error: ', error)}});

        var GraphChannel = "a";
        var h = true;

        charttemp = eon.chart({
            pubnub: pubnub,
            channel: GraphChannel,
            limit: 1440,
            history: h,
            flow: true,
            generate: {
                bindto: "#charttemp",
                data: { colors : {}, type: "spline"},
                transition: {duration: 250},
                axis: { x: {label: "Time", show: false}},
                grid: { x: {show: false}, y: {show: true}},
            },
            transform: function (m) 
            {
                return {eon: { 'Temperature' : m.tN}}
            }
        });
    </script>           
</br>
</body>
</html>
Comments