How to add a map popup with dynamic updating chart
<p>I am keen on using <a href="https://plot.ly/~streaming-demos/6/streaming-mock-sensor-data/" rel="nofollow noreferrer">Plotly.js</a> or <a href="http://canvasjs.com/html5-javascript-dynamic-chart/" rel="nofollow noreferrer">Canvas.js</a> chart to a popup within a <a href="http://leafletjs.com/" rel="nofollow noreferrer">Leaflet.js</a> produced map. However, the popup in leaflet.JS is Javascript and even though I could put custom HTML into the popup, I can't refer to the div inside that popup later to style it.</p>

<pre><code>var candle1 = L.marker([51.495791, -0.13949219999994966], {
            icon: candle1Icon       }).addTo(map).bindPopup(document.getElementById("myDiv").innerHTML).openPopup();
</code></pre>

<p>My current method has been to create a div on my page, hide it, and then call document.getElementByID.innerHTML to get the contents of the div (my live chart). However, this only gets the HTML of the chart, not live updating Javascript. </p>

<p>My aim is to get something like this appearing in the popup:
<a href="http://canvasjs.com/html5-javascript-dynamic-chart/" rel="nofollow noreferrer">http://canvasjs.com/html5-javascript-dynamic-chart/</a></p>

<p>My code is attached, and this is how my chart looks like:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
            position: absolute;
            z-index: 10;
            width: 100%;
            text-align: center;
        }
        
        .card {
            /*
            background-color: #ece9da;
            margin: 0 auto;
            max-width: 50%;
            border-radius: 0 0 120px / 0 0 6px 0;
            border: 1px solid #ece9da;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1)inset;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1)inset;
*/
        }
        
        .header h1 {
            font-size: 35pt;
            text-shadow: 0px 1px 1px #4d4d4d;
            /*            font-family: 'Niconne', cursive;*/
            padding: 10px;
            /*            color: #cd0a0c;*/
            content: "";
        }
        
        .header i {
            color: #ece9da;
            font-size: 15pt;
            text-shadow: 0px 1px 1px #4d4d4d;
        }
        /*defined height for the map*/
        
        html {
            background-color: '#000';
            height: 100%;
            width: 100%;
        }
        
        body {
            height: 100%;
            width: 100%;
            position: relative;
            padding: 0;
            margin: 0;
        }
        
        .container {
            height: 100%;
            width: 100%;
        }
        
        #myDiv.hidden {
            display: none;
        }
        
        #map {
            z-index: 0;
            height: 100%;
            width: 100%;
        }
        
        .leaflet-marker-icon {
            z-index: 3;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- for mobile --&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
    &lt;!-- font --&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'&gt;
    &lt;!--    Plotly graphs--&gt;
    &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
    &lt;!-- Leaflet CSS --&gt;
    &lt;link rel="stylesheet" href="leaflet/leaflet.css" /&gt;
    &lt;link rel="stylesheet" href="css/style.css"/&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;!-- div to put the map in --&gt;
    &lt;div class="header"&gt;
        &lt;div class="card"&gt;
            &lt;h1&gt;
            SubsIoT Heatmap 
            &lt;/h1&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="hidden" id="myDiv" style="width: 300px; height: 300px;"&gt;
        Westminster Cathedral
    &lt;/div&gt;
    &lt;div id="vignette"&gt;&lt;/div&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;!-- include LeafletJS --&gt;
    &lt;script src="leaflet/leaflet.js"&gt;&lt;/script&gt;
    &lt;!-- for your eye pleasure add the toner map --&gt;
    &lt;script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"&gt;&lt;/script&gt;
    &lt;!-- include RelayrJS --&gt;
    &lt;script src="https://developer.relayr.io/relayr-browser-sdk.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        &lt;!-- JAVASCRIPT CODE GOES HERE --&gt;
    &lt;/script&gt;
    &lt;!--
    &lt;div id="myDiv" style="width: 480px; height: 400px;"&gt;
         "Westminster Cathedral"
    &lt;/div&gt;   
--&gt;
    &lt;script&gt;
        // load the map and set the view to Aviva Offices
        var map = new L.map('map').setView([51.5141289, -0.08157860000005712], 13);
        //load the toner layer
        var layer = new L.StamenTileLayer("toner-lite");
        //add a layer
        //        map.addLayer(layer);
        //or add a tile layer get from Mapbox.com
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
        }).addTo(map);
        //define an icon class 
        var CandleIcon = L.Icon.extend({
            options: {
                iconSize: [90, 90],
                iconAnchor: [22, 94],
                popupAnchor: [-3, -76]
            }
        });
        //create icons
        var candle1Icon = new CandleIcon({
                iconUrl: 'leaflet/images/building.png'
            }),
            candle2Icon = new CandleIcon({
                iconUrl: 'leaflet/images/building.png'
            }),
            candle3Icon = new CandleIcon({
                iconUrl: 'leaflet/images/building.png'
            });
        candle4Icon = new CandleIcon({
            iconUrl: 'leaflet/images/building.png'
        });
        candle5Icon = new CandleIcon({
            iconUrl: 'leaflet/images/building.png'
        });

        var data = 

            [
            {
                x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
                y: [1, 3, 6],
                type: 'scatter'
  }
];

        Plotly.newPlot('myDiv', data);

        //shortcut for easy naming
        L.icon = function (options) {
            return new L.Icon(options);
        };
        //set the marker and some random start values
        //Westminster Cathedral
        var candle1 = L.marker([51.495791, -0.13949219999994966], {
            icon: candle1Icon
        }).addTo(map).bindPopup(document.getElementById("myDiv").innerHTML).openPopup();
        //FCA Building
        var candle2 = L.marker([51.50561740000001, -0.02005209999992985], {
            icon: candle2Icon
        }).addTo(map).bindPopup("Financial Conduct Authority Offices").openPopup();
        //Deutsche Bank
        var candle3 = L.marker([51.5162643, -0.08466120000002775], {
            icon: candle3Icon
        }).addTo(map).bindPopup("Deutsche Bank Offices").openPopup();
        //Transport for London
        var candle4 = L.marker([51.499518, -0.1350652999999511], {
            icon: candle4Icon
        }).addTo(map).bindPopup("TFL Development").openPopup();
        //Brit Insurance
        var candle5 = L.marker([51.51543410000001, -0.0829890999999634], {
            icon: candle5Icon
        }).addTo(map).bindPopup("Brit Insurance Building").openPopup();




        //Relayr Credentials
        var AppID = "f5cf0531-8830-4566-b751-44a1b2d9f71b";
        var toke = "8Bn7zu.q0MkC_aoIGmHLSG_Ewq08VW4M";
        var Candle1_deviceId = "452411b1-6b68-4fa6-b9f2-7c5d0b7b7c2d";


        var relayr = RELAYR.init({
            appId: AppID
        });


        relayr.devices().getDeviceData({
            token: toke,
            deviceId: Candle1_deviceId,
            incomingData: function (data) {
                console.log("co");
                console.log(data.readings[0].meaning);
                console.log(data.readings[0].value);
                console.log(data.readings[1].meaning);
                console.log(data.readings[1].value);
                console.log(data.readings[2].meaning);
                console.log(data.readings[2].value);
                //Humidity data coming through
                if (data.readings[0].meaning == "Fire") {
                    console.log(data.readings[0].value);

                    //if true then
                    if (data.readings[0].value == 0) {

                        //set LatLng
                        candle1.setLatLng([data.readings[1].value, data.readings[2].value]);
                        //show candle
                        candle1.addTo(map);

                        //false
                    } else {

                        //remove candle
                        map.removeLayer(candle1);

                    }
                }
            }
        });
    &lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Attached Screenshot:</strong> <a href="https://i.stack.imgur.com/ZUHkF.jpg" rel="nofollow noreferrer">4</a></p>