I have a site which loads html (comming from a database) into a div. Using Backbone as a framework and Handlebars as templating tool.
In this html I also have some javascript which also works perfectly.
However, when I try to also include the plotly cdn or even the whole javascript it will not recognize Plotly. resulting into the error:
"Plotly not defined"
I tried to solve this loading Plotly using jQuery and even placing the full minified Plotly Code into the HTML however with no result.
This is html / javascript code what works when loaded into a div.:
<div class='ldbp_img' style='overflow: auto; height:100%; width: 100%;'></div>
<script type='application/javascript' language='JavaScript'>
if (!Date.now) {
Date.now = function() { return new Date().getTime(); }
}
var img = new Image(),
imageUrl = "http://new.image.nu/1234.png',
interval = 30000;
$(img).attr('width', '100%');
$(img).attr('height', '100%');
var setImg = function () {
//var img = new Image();
var time = Math.floor(Date.now() / 1000);
img.src = imageUrl + time;
$('.ldbp_img').html(img);
};
img.src = imageUrl';
$('.ldbp_img').html(img);
if (window.countInt) {
clearInterval(window.countInt);
window.countInt = null;
}
window.countInt = setInterval(setImg, interval);
</script>
When loading plotly it doesn't work:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
</script>
I also tried this using jQuery with no result:
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
$.ajax({
url: "https://cdn.plot.ly/plotly-latest.min.js",
dataType: "script",
cache: true,
success: function () {
runNow();
}
});
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
var runNow = function () {
Plotly.plot('my-graph', data, layout);
};
</script>
This does work in jsfiddle, the only difference is that I do not load the html asynchronously into the DOM.
working fiddles: https://jsfiddle.net/b2js15nm/ https://jsfiddle.net/b2js15nm/1/
Hence!: I cannot use backbone and handlebars to really re-create the situation. It looks like the AMD of Plotly does not work when loaded later on the page. Therefore Plotly will be undefined.
As I was thinking that the AMD module was the issue, I tried to load the script using require. I am already using require so I needn't do much to implement it.
Here is what the page looks like now:
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
require(['https://cdn.plot.ly/plotly-latest.min.js'], function (Plotly) {
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
});
</script>