Menu
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
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>
275
I was using your code to help another user and ended up solving your code:
Reason why you are seeing blanks:
Look at the answer by Keith C
source : https://salesforce.stackexchange.com/questions/45455/using-dc-js-d3-js-and-crossfilter-in-visualforce/45461?noredirect=1#comment59006_45461
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>
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
