0 votes
1 view
in Salesforce by (11.9k points)

I'm currently trying to implement javascript and html within Visual force in order to produce a graph.The below script is suppose to do this, but all I see is a blank page. The resources I'm importing include

  • jquery
  • D3
  • Dc
  • Crossfilter
  • firebase
  • twitter-bootstrap
  • dc.css
  • bootstrap.css

Perhaps, it's the way I'm importing libraries through their src link, but this hasn't posed a problem before.

<apex:page showHeader="false" standardStylesheets="false">

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js" type="text/javascript"></script>

    <script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" media="screen" /> 

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" /> 

</head>

<body>

<div class='pie-graph span6' id='dc-magnitude-chart'></div>

<script type = "text/javascript">

new Firebase('https://MYFIREBASE.firebaseIO.com/BetaActivities').on('value', function (snapshot) {

    var lst = [];

    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});

    ndx = new crossfilter(lst);

    var XDimension = ndx.dimension(function (d) {return d.Owner;});

    var YDimension = XDimension.group().reduceCount(function(d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")

        .width(480).height(150)

        .dimension(XDimension)                                

        .group(YDimension)

        .centerBar(true)

        .gap(56)

        .x(d3.scale.ordinal().domain(XDimension))

        .xUnits(dc.units.ordinal)

        .xAxisLabel("Market Developer")

        .yAxisLabel("Unique Counts")

        .elasticY(true)

        .xAxis().tickFormat(function(v) {return v;}); 

    dc.renderAll();

    });

</script>

</body>

</apex:page>

1 Answer

0 votes
by (29.8k points)

According to a document on Salesforce:

When running JavaScript you should always have your browser's developer tools displayed, particularly the JavaScript console. If you do (at least in Chrome and probably other browsers too), you will find that all the http:// requests are blocked:

[blocked] The page at '...' was loaded over HTTPS, but ran insecure content from '...': this content should also be loaded over HTTPS. which will cause your page to fail.

Change to https:// locations as the original page is loaded via https://

<apex:page showheader="false" standardStylesheets="false">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"/>

<apex:includeScript value="{!URLFOR($Resource.d3js)}"/>

<apex:includeScript value="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"/>

<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js" />

<apex:includeScript value="https://cdn.firebase.com/js/client/1.0.17/firebase.js"/>

<apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"/>

<apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css"/> 

<apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 

<body>

<div class='pie-graph span6' id='dc-magnitude-chart'></div>

<script type = "text/javascript">

new Firebase('https://shippy.firebaseIO.com/BetaActivities').on('value', function (snapshot) {

    var lst = [];

    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});

    ndx = new crossfilter(lst);

    var XDimension = ndx.dimension(function (d) {return d.Owner;});

    var YDimension = XDimension.group().reduceCount(function(d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")

        .width(480).height(150)

        .dimension(XDimension)                                

        .group(YDimension)

        .centerBar(true)

        .gap(56)

        .x(d3.scale.ordinal().domain(XDimension))

        .xUnits(dc.units.ordinal)

        .xAxisLabel("Market Developer")

        .yAxisLabel("Unique Counts")

        .elasticY(true)

        .xAxis().tickFormat(function(v) {return v;}); 

    dc.renderAll();

    });

</script>

</body>

</apex:page>

enter image description here

...