[SOLVED] Cannot get PubNub EON chart to work with data coming from a Particle Photon

Cannot get PubNub EON chart to work with data coming from a Particle Photon

I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.

(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)

The P tag is displayed on the screen, but no gauge is displayed.

Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.

<!DOCTYPE html>

<html>

<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script>  -->

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


<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key:  'xxxxxxx'});

/*
  pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
            {document.getElementById("x").innerHTML = tempmsg.eon.data;}});

*/

var channel 'datatest';
eon.chart({
            channel: channel,
            generate: {
                        bindto: '#chart',
                        data: {
                                type: 'gauge',
                                },
                        gauge: {
                                min: 0,
                                max: 100
                                },
                        color: {
                                pattern: ['#FF0000', '#F6C600', '#60B044'],
                                threshold: {
                                                values: [30, 60, 90]
                                            }
                                }
                        }
            });
</script>



<body>
    <p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>

</html>

The output from the photon looks like this:

publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}

Solution

There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.

You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.