Dashboards in Visualforce Page - A Cool Way!!

3:24 PM

What if you wanted to display a dashboard in a Visualforce Page, or what if you do not like the standard dashboard's of Salesforce and wanted to create new dashboard's.

This article shows an example of displaying dashboard's in a Visualforce page using JQuery Flot.

JQuery Flot is an open source Jquery Plugin which can be downloaded from here.The link has proper documentation and the various ways of using Flot.

You can watch a demo in action here.

Screenshot:




Step 1: 

Get the Jquery Flot ZIP file from here. Make sure that you download the latest version when available. This example was tested with Flot version 0.6.

Step 2:

Upload the ZIP file just downloaded into Static Resource. Let's Name the Static Resource "FlotDashboard". You may rename it to a meaningful name if you like to.

Step 3:

Let's create a Visualforce Page to see how the dashboard works.



<apex:page showheader="false">
 
<html>
 <head>
  
    <title>Flot Examples</title>
     <link href="{!URLFOR($Resource.FlotDashboard,'flot/examples/layout.css')}" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/excanvas.min.js')}"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.js')}"></script>
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.flot.js')}"></script>
    <script language="javascript" type="text/javascript" src="{!URLFOR($Resource.FlotDashboard,'flot/jquery.flot.stack.js')}"></script>
 </head>
    <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px"></div>

    <p>One of the goals of Flot is to support user interactions. Try
    pointing and clicking on the points.</p>

    <p id="hoverdata">Mouse hovers at
    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>

    <p>A tooltip is easy to build with a bit of jQuery code and the
    data returned from the plot.</p>

    <p><input id="enableTooltip" type="checkbox"/>Enable tooltip</p>

<script id="source" language="javascript" type="text/javascript">
$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    var plot = $.plot($("#placeholder"),
           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: -1.2, max: 1.2 }
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                   
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                   
                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;           
            }
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script>

 </body>
</html>

</apex:page>


Step 4:

Modify the script above to  plot your own values in the dashboard. You can also compute your data points in an apex class and pass them to the dashboard.

I will try and post a more elaborate example of customizing this Dashboard using Apex.

Share This Story

Tags: ,

6 comments

  1. Tim InmanMarch 16, 2011 at 8:44 AM

    Nice post! Thanks for sharing.

    ReplyDelete
  2. AnonymousApril 11, 2011 at 1:19 PM

    Interesting One

    ReplyDelete
  3. AnonymousMay 8, 2011 at 6:29 AM

    u r doing awesome work

    ReplyDelete
  4. AnonymousMay 11, 2011 at 9:14 PM

    Can you please post an example of customizing this using apex ?

    ReplyDelete
  5. AnonymousMay 13, 2011 at 11:33 AM

    awesome...thanks very much

    ReplyDelete
  6. AnonymousJune 21, 2011 at 7:12 PM

    Brilliant... thanks for sharing!

    ReplyDelete