Javascript module not appearing in website hosted through CS50 IDE
Question
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.
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.
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!
1 answers
solution1
0 2019-01-04 01:06:34
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.
I fixed the problem by replaced all of the vanilla "http://" in the previously provided code with "https://".
Thank you, thank you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.