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>
Back