ForceTree.com

Incident and Timesheet Management for Salesforce

3:42 PM

iGoogle like Homepage for Salesforce

3:35 PM

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.

Incident and Timesheet Management for Salesforce

iGoogle like Homepage for Salesforce

Dashboards in Visualforce Page - A Cool Way!!

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB