Back

Explore Courses Blog Tutorials Interview Questions

How to implement Javascript within Salesforce Visual Force?

0 votes
2 views
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 (32.1k 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

Related questions

0 votes
1 answer
Plot a line using d3.js library in Power BI custom visual
asked Jul 16, 2019 in BI by Vaibhav Ameta (17.6k points)
0 votes
0 answers
Custom bullseye chart for Salesforce chart.js
asked Jul 25, 2019 in Salesforce by Kartik12234 (11.9k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...