Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

Today I was able to make angular.js run in visualforce. Now, I am trying to use the dc.js in visualforce to generate graphs. I create a page and this is how my code looks like:

<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'>
 <h4>Events by Magnitude</h4>
        </div>
<script type = "text/javascript">

//Create empty list
//push filled list into cross filter
new Firebase('https://secret.firebaseIO.com/secret').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>

It pulls data from firebase. The code runs fine in my browser, so there are no mistakes. I am trying to make it work in visualforce. Help appreciated.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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://.

PS

The CDN location I have used for D3 is listed at https://cdnjs.com/libraries/d3/ and is https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js.

share|improve this answer
    
Also I did see that the d3.js is not loading fine even if you set it to https:// so I would recommend downloading the d3.js and adding it to static resource in SFDC and referencing it in the Visualforce page as <apex:includeScript value="{!URLFOR($Resource.d3js)}"/> having not much experty I was able to generate a half baked graph with problem parsing d="..." errors, hopefully you can crack this with Keith's recommendation and mine –  rao Jul 29 at 21:34
    
@KeithC I changed all links to https. It took a bit long for the preview to load, but again I did not get a graph. I will try to upload d3.js as a static resource shortly. –  Koba Jul 29 at 21:39
    
@Koba I've used this CDN cdnjs.com/libraries/d3 for D3. –  Keith C Jul 29 at 21:48
    
oh yeah. I am using dc.js and not d3.js. I am also using cdnjs.com. –  Koba Jul 29 at 21:51
    
I read somewhere that d3 may not be loading on your browser so it would be better to download to your local and use it as a static resource. –  rao Jul 29 at 21:54

@Koba

NOTE: I do not know much about d3 (or) angular JS, having given this disclaimer, I think there is an issue with your data source you use to grab the data " https://secret.firebaseIO.com/secret"

take a look at the below post :

http://stackoverflow.com/questions/25025008/how-to-implement-javascript-within-salesforce-visual-force

when I set all the Scripts to 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>

**

changing the data source for firebase to "https://shippy.firebaseIO.com/BetaActivities" this is what I see

**

enter image description here

share|improve this answer
    
How did you know it is shippy. etc. etc.? –  Koba Jul 29 at 21:59
    
lol just from the post here : stackoverflow.com/questions/25025008/… –  rao Jul 29 at 22:00
    
yo this is hillarious. But no it is not a problem. Actually, we just figured it out. –  Koba Jul 29 at 22:05
    
@koba lol are you the same user who asked the other question? I was sure of what I was doing until the https part because i broke my head with http:// reference a few months back, after that it was all googling around that lead to the output –  rao Jul 29 at 22:07
    
No I am not the same user. It is two of us working on that stuff. Yeah we spend like 2 hours on solving that issue. –  Koba Jul 29 at 22:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.