Javascript module not appearing in website hosted through CS50 IDE

Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm working on my final project for the course, and struggling to make sense of a bug I'm having with cal-heatmap, a Javascript library that can create heat maps such as Github's contribution calendar.
When I create an HTML file on my computer and open it in Chrome, everything looks perfect.
Perfect
When I create the same HTML file in CS50 IDE and open it after hosting a server through CS50 IDE with Flask/Apache, the thing does not look perfect.
Not perfect
Here is the code, sourced from this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cal-Heatmap Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h2>
Cal-HeatMap Samples</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>
<div class="panel-body">
<div id="heatmap-navigation">
<button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div id="cal-heatmap">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
cellSize: 20,
itemName: ["service ticket", "service tickets"],
data: {
"1452019700": 40,
"1454688100": 50,
"1452710900": 5,
"1452883700": 15,
"1453142900": 15,
"1453488500": 30,
"1456239700": 80,
"1453662300": 20,
"1455130100": 60,
"1455562100": 70,
"1455131100": 10,
"1456166900": 30,
"1456399000": 12,
"1451674100": 90
},
subDomainTextFormat: "%d",
range: 3,
displayLegend: true,
domainMargin: 20,
animationDuration: 800,
domainDynamicDimension: false,
start: new Date(2016, 01, 01),
end: new Date(2016, 02, 26),
scale: [10, 20, 80],
previousSelector: "#heatmap-previous",
nextSelector: "#heatmap-next",
});
</script>
</body>
</html>
What gives? Why am I getting different results with identical code?
Thanks for your help!
javascript cs50
add a comment |
I'm working on my final project for the course, and struggling to make sense of a bug I'm having with cal-heatmap, a Javascript library that can create heat maps such as Github's contribution calendar.
When I create an HTML file on my computer and open it in Chrome, everything looks perfect.
Perfect
When I create the same HTML file in CS50 IDE and open it after hosting a server through CS50 IDE with Flask/Apache, the thing does not look perfect.
Not perfect
Here is the code, sourced from this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cal-Heatmap Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h2>
Cal-HeatMap Samples</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>
<div class="panel-body">
<div id="heatmap-navigation">
<button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div id="cal-heatmap">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
cellSize: 20,
itemName: ["service ticket", "service tickets"],
data: {
"1452019700": 40,
"1454688100": 50,
"1452710900": 5,
"1452883700": 15,
"1453142900": 15,
"1453488500": 30,
"1456239700": 80,
"1453662300": 20,
"1455130100": 60,
"1455562100": 70,
"1455131100": 10,
"1456166900": 30,
"1456399000": 12,
"1451674100": 90
},
subDomainTextFormat: "%d",
range: 3,
displayLegend: true,
domainMargin: 20,
animationDuration: 800,
domainDynamicDimension: false,
start: new Date(2016, 01, 01),
end: new Date(2016, 02, 26),
scale: [10, 20, 80],
previousSelector: "#heatmap-previous",
nextSelector: "#heatmap-next",
});
</script>
</body>
</html>
What gives? Why am I getting different results with identical code?
Thanks for your help!
javascript cs50
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
Any errors in the console?
– Phix
Jan 3 at 23:03
add a comment |
I'm working on my final project for the course, and struggling to make sense of a bug I'm having with cal-heatmap, a Javascript library that can create heat maps such as Github's contribution calendar.
When I create an HTML file on my computer and open it in Chrome, everything looks perfect.
Perfect
When I create the same HTML file in CS50 IDE and open it after hosting a server through CS50 IDE with Flask/Apache, the thing does not look perfect.
Not perfect
Here is the code, sourced from this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cal-Heatmap Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h2>
Cal-HeatMap Samples</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>
<div class="panel-body">
<div id="heatmap-navigation">
<button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div id="cal-heatmap">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
cellSize: 20,
itemName: ["service ticket", "service tickets"],
data: {
"1452019700": 40,
"1454688100": 50,
"1452710900": 5,
"1452883700": 15,
"1453142900": 15,
"1453488500": 30,
"1456239700": 80,
"1453662300": 20,
"1455130100": 60,
"1455562100": 70,
"1455131100": 10,
"1456166900": 30,
"1456399000": 12,
"1451674100": 90
},
subDomainTextFormat: "%d",
range: 3,
displayLegend: true,
domainMargin: 20,
animationDuration: 800,
domainDynamicDimension: false,
start: new Date(2016, 01, 01),
end: new Date(2016, 02, 26),
scale: [10, 20, 80],
previousSelector: "#heatmap-previous",
nextSelector: "#heatmap-next",
});
</script>
</body>
</html>
What gives? Why am I getting different results with identical code?
Thanks for your help!
javascript cs50
I'm working on my final project for the course, and struggling to make sense of a bug I'm having with cal-heatmap, a Javascript library that can create heat maps such as Github's contribution calendar.
When I create an HTML file on my computer and open it in Chrome, everything looks perfect.
Perfect
When I create the same HTML file in CS50 IDE and open it after hosting a server through CS50 IDE with Flask/Apache, the thing does not look perfect.
Not perfect
Here is the code, sourced from this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cal-Heatmap Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h2>
Cal-HeatMap Samples</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>
<div class="panel-body">
<div id="heatmap-navigation">
<button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div id="cal-heatmap">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
cellSize: 20,
itemName: ["service ticket", "service tickets"],
data: {
"1452019700": 40,
"1454688100": 50,
"1452710900": 5,
"1452883700": 15,
"1453142900": 15,
"1453488500": 30,
"1456239700": 80,
"1453662300": 20,
"1455130100": 60,
"1455562100": 70,
"1455131100": 10,
"1456166900": 30,
"1456399000": 12,
"1451674100": 90
},
subDomainTextFormat: "%d",
range: 3,
displayLegend: true,
domainMargin: 20,
animationDuration: 800,
domainDynamicDimension: false,
start: new Date(2016, 01, 01),
end: new Date(2016, 02, 26),
scale: [10, 20, 80],
previousSelector: "#heatmap-previous",
nextSelector: "#heatmap-next",
});
</script>
</body>
</html>
What gives? Why am I getting different results with identical code?
Thanks for your help!
javascript cs50
javascript cs50
asked Jan 3 at 21:50


Levi MillerLevi Miller
12
12
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
Any errors in the console?
– Phix
Jan 3 at 23:03
add a comment |
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
Any errors in the console?
– Phix
Jan 3 at 23:03
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
Any errors in the console?
– Phix
Jan 3 at 23:03
Any errors in the console?
– Phix
Jan 3 at 23:03
add a comment |
1 Answer
1
active
oldest
votes
Phix, I could kiss you!!
As an amateur, I clearly do not have the habit of snooping the Chrome console. When I did at your behest, the problem was clear as crystal:
Cloud9 (CS50's cloud-based IDE) does not let you link to resources that merely follow HTTP instead of HTTPS.
Before
After
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030298%2fjavascript-module-not-appearing-in-website-hosted-through-cs50-ide%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Phix, I could kiss you!!
As an amateur, I clearly do not have the habit of snooping the Chrome console. When I did at your behest, the problem was clear as crystal:
Cloud9 (CS50's cloud-based IDE) does not let you link to resources that merely follow HTTP instead of HTTPS.
Before
After
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
add a comment |
Phix, I could kiss you!!
As an amateur, I clearly do not have the habit of snooping the Chrome console. When I did at your behest, the problem was clear as crystal:
Cloud9 (CS50's cloud-based IDE) does not let you link to resources that merely follow HTTP instead of HTTPS.
Before
After
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
add a comment |
Phix, I could kiss you!!
As an amateur, I clearly do not have the habit of snooping the Chrome console. When I did at your behest, the problem was clear as crystal:
Cloud9 (CS50's cloud-based IDE) does not let you link to resources that merely follow HTTP instead of HTTPS.
Before
After
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
Phix, I could kiss you!!
As an amateur, I clearly do not have the habit of snooping the Chrome console. When I did at your behest, the problem was clear as crystal:
Cloud9 (CS50's cloud-based IDE) does not let you link to resources that merely follow HTTP instead of HTTPS.
Before
After
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
answered Jan 4 at 1:06


Levi MillerLevi Miller
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030298%2fjavascript-module-not-appearing-in-website-hosted-through-cs50-ide%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
KWEUmCJIrNsNVdMvRrPo,XmHEL6c
The code you posted does show "perfect" result. So without further info we can only guess. My guess is, that your paths to CDNs will just don't work.
– Ludovit Mydla
Jan 3 at 22:04
Any errors in the console?
– Phix
Jan 3 at 23:03