Building Interactive Dashboards in Visualforce Pages

February 26, 2014 in D3, Data Visualization, Salesforce, Visualforce

In my previous post, I shared a sample application showing how to build interactive Mobile Dashboards for the Salesforce platform using the Force.com 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">
<head>
    <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" />
</head>
<body>

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

<script>
    var client = new forcetk.Client();
    client.setSessionToken('{!$Api.Session_ID}');
    app.init(client);
</script>

</body>
</apex:page>

Summary

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).

  • Lina

    I am getting an error like this:

    ReferenceError: app is not defined
    app.init();

    Please help

    • Oleksiy

      Christophe,

      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

        Lina/Oleksiy,
        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.
        Thanks!

        • Oleksiy

          Nope…

          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

            hi

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

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

        • Rakesh

          Did anybody ever got to fix this issue ?

  • daniel

    Hi,
    really nice post!!

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

    Kind regards
    daniel

  • Caleb

    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.

  • Pingback: Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets | Tnimish's Blog()

  • Prashant Saxena

    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.

    Thanks
    Prashant Saxena

  • 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!

  • Pingback: Building Interactive Dashboards in Visualforce Pages | Christophe Coenraets |()

  • Pingback: The Quantified Self and Humanities Best Friend. | CodeFriar.com()

  • Tyler

    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.

    Sincerely,

    Tyler O.

  • wow, this is really impressing and inspiring!!

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

  • tesekkurden yikildik ama konulara bakmaktan yikilmadik.

css.php