Javascript module not appearing in website hosted through CS50 IDE

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















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!










share|improve this question























  • 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


















0















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!










share|improve this question























  • 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














0












0








0








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!










share|improve this 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.



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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












1 Answer
1






active

oldest

votes


















0














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!






share|improve this answer
























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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!






    share|improve this answer




























      0














      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!






      share|improve this answer


























        0












        0








        0







        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!






        share|improve this answer













        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!







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 4 at 1:06









        Levi MillerLevi Miller

        12




        12
































            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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
            tX Z,Oip2bNpyjvNodlA4q,Jf 85hLOzBL,Cud3YcApSf6wkpZzNUsJ8t72gDE86HTPpLxg47

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas