Building Interactive Dashboards in Visualforce Pages

In my previous post, I shared a sample application showing how to build interactive Mobile Dashboards for the Salesforce platform using the Mobile SDK, D3, ChartJS, and other data visualization libraries.

As I mentioned in that post, the same application could be deployed in a Visualforce page hosted in your Salesforce environment.

Here is a short video showing the app running in a Visualforce page, first with the Salesforce chrome (header, sidebar, etc), and then “full screen” without the Salesforce chrome. This last version could be the one users access in a browser on their tablet.

Source Code

I shared the source code for the sample application in my previous post:

  • The ChartJS version is available in this GitHub repository.
  • The D3 version is available in this GitHub repository.

The objective of this experiment was to deliver a highly interactive experience. There are no page refreshes or even partial page refreshes. Instead of being regenerated, the charting components are updated “live” when their data source changes, allowing for nice and meaningful transitions and animations. There is very little code in the Visualforce page: the bulk of the application is written in JavaScript. The application accesses the data using the REST APIs through ForceTK.

Here is code for the Visualforce page:

<apex:page docType="html-5.0" standardStylesheets="false" showHeader="true" sidebar="false">
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <link href="{!URLFOR($Resource.dashboard_embedded, 'bootstrap/css/bootstrap-responsive.min.css')}" rel="stylesheet" />
    <link href="{!URLFOR($Resource.dashboard_embedded, 'css/app.css')}" rel="stylesheet" />

<script src="{!URLFOR($Resource.dashboard_embedded, 'lib/jquery.js')}"></script>
<script src="{!URLFOR($Resource.dashboard_embedded, 'lib/forcetk.js')}"></script>
<script src="{!URLFOR($Resource.dashboard_embedded, 'js/app.js')}"></script>

    var client = new forcetk.Client();



Depending on your requirements and your target audience, you can deploy the same application as a traditional mobile app that users would install through app stores (previous post), or inside the Salesforce environment as a Visualforce page (this post). You can also deploy the same dashboards in the Salesforce1 application (a future post).

17 Responses to Building Interactive Dashboards in Visualforce Pages

  1. Lina March 4, 2014 at 4:20 am #

    I am getting an error like this:

    ReferenceError: app is not defined

    Please help

    • Oleksiy April 11, 2014 at 3:16 pm #


      I echo Lina – can we get the modified app.js (or dashboard_embedded resource content) you used for visualforce demo? I tried to modify the code to make it working in my org with no luck :(

      Thank you in advance.

      • Cissou June 5, 2014 at 4:26 am #

        did you eventually get to make the code work? I’m hitting the same issue (app is not defined), and could not find a way to solve it.

        • Oleksiy June 10, 2014 at 8:02 pm #


          I met Christophe at the Salesforce1 World Tour: Chicago and asked about this error – he confirmed that different code was used and said that will update the post, but he hasn’t obviously.

          Let’s hope that Christophe would be able to find a few minutes and will make some folks more happier ;)

          • Ricardo July 25, 2014 at 12:35 pm #


            i have the same problem, any of you could make it work

            accounting is not defined app.js:7
            app is not defined

        • Rakesh July 16, 2015 at 4:40 pm #

          Did anybody ever got to fix this issue ?

  2. daniel March 5, 2014 at 7:11 am #

    really nice post!!

    Which of the ionic templates are you using in youre previous post??
    Thanks a lot

    Kind regards

  3. Caleb March 12, 2014 at 7:06 pm #

    Hi Christophe,

    Do you know if what you have done with these interactive dashboards can be done with reports as well. We are looking to use visualforce to display reports built and maintained by our employees to be exposed to a Customer Community that does not have reporting enabled.

    Let me know if you think it can be done, I would love to chat about it.

  4. Prashant Saxena April 23, 2014 at 6:50 am #

    Hi Chris,

    I have used your vf page in my dashboard(excluding static resources), just the simple page with all the page attributes you have mentioned.But unfortunately it does not show up in a Salesforce 1 app.
    It gives the error “Visualforce components aren’t available.”Any idea why I have getting this error.
    Any help will be greatly appreciated.Thanks in Advance.

    Prashant Saxena

  5. sbobet June 2, 2014 at 12:34 pm #

    Pretty nice post. I just stumbled upon your blog and wished
    to say that I have really enjoyed surfing around your blog posts.
    After all I’ll be subscribing to your rss feed and I hope you write again very soon!

  6. Tyler April 22, 2015 at 2:40 pm #

    Hi Christophe,

    Any chance you can update your GitHub repository for the Interactive Dashboards in Visualforce Pages? I’d love to find a way to use these.


    Tyler O.

  7. Fabian July 7, 2015 at 9:36 pm #

    wow, this is really impressing and inspiring!!

  8. futbol çorapları November 17, 2015 at 9:00 am #

    качество, надежность, экономичность и связанные работы выполняются imalattan.profesyonel команду

  9. sohbet odalari December 8, 2015 at 5:18 pm #

    tesekkurden yikildik ama konulara bakmaktan yikilmadik.


  1. Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets | Tnimish's Blog - March 31, 2014

    […] Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets. […]

  2. Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets | - July 15, 2014

    […] Curated from […]

  3. The Quantified Self and Humanities Best Friend. | - December 3, 2014

    […] aggregation platform. It’s suite of analytics tools — from reports, dashboards and the analytics api that can power D3 based visualizations like the one’s Christophe Coenraets has b… — are unparalleled. After we’ve moved to 30 hour days, and I have more time, I’ll […]

Leave a Reply