Have any questions?
+44 1234 567 890
Chapter 20. Dashboards and Dadgets
20. Dashboards and Dadgets
The Dashboard module is the first module users will see after signing in. Here, users can file simply prepared data for quick access. For further information on the use of the Dashboard refer to the ReportServer User manual.
Dashboards are privately owned. This means that users can configure their Dashboards themselves, and other users cannot change (or view) them. As the administrator you can provide pre-defined Dadgets and even complete Dashboards that users can easily import. To pre-configure a Dashboard or Dadget, switch to the Administration section and then to Dashboard Library.
Like many other objects in ReportServer, Dashboards and Dadgets are managed hierarchically. This enables to clearly manage even large object volumes and comfortably assign rights. Users must have read access to Dadgets and Dashboards they want to import. The following objects can be created in the Dashboard tree:
| Folder | Serves to structure Dashboards and Dadgets. |
| Dadget | A pre-configured Dadget which users can import to proper Dashboards. |
| Dashboard | A pre-configured Dashboard that users can import. |
The settings of a Dadget are identical to its configuration when a user imports it to the Dashboard. In a first step you have to configure the Dadget type. After having transferred the data, you can set the specific properties of the Dadget. Please observe that Dadgets which have been integrated by users cannot be changed, and the changes you made in the Administration section will be immediately visible to the user.
For details about the individual Dadget types refer to the User manual. As the most frequent case for Dadgets pre-defined by the administrator is certainly the configuration of complex HTML Dadgets, we have dedicated this subject a separate paragraph at the end of this section.
To pre-configure a complete Dashboard, create a new object of type Dashboard. Define its layout and then configure it in the usual way. Please observe here as well that users cannot change Dashboards that have been integrated by them. Therefore, the changes you made in the Administration section will also directly be applied to users.
20.1. Static HTML Dadgets
As an example we next show you how to add a simple chart to your dadget that combines several techniques.
ReportServer's dynamic list offers many export formats some of which, such as JSON, make it easy to use the returned data directly from within javascript. We are going to use the jplot library, a charting extension to the popular jquery library, to create just a very simple pie chart.
The RerportServer's demo data comes with a dynamic list on top of the customer data aggregate: T_AGG_CUSTOMER. This table contains all data relevant to specific customers. We are going to visualize the number of customers per office using a simple pie chart.
The first step is to get the data. ReportServer allows to export reports directly via the URL
http://SERVER:PORT/reportserverbasedir/reportserver/reportexport
You can access a particular report via its id or via its key (in this case ensure that it is unique). Suppose you have a report with the key myreport then you can export the report to say PDF by calling
http://SERVER:PORT/reportserverbasedir/reportserver/reportexport&key=myreport&format=pdf
There are two options to proceed, either create a variant first, that accesses the data we need for the chart, or use the base report and access the data via the URL directly. We are going for the second option here. Assuming the customer report has the key customer we can access the data via the following URL
You can test this on our demo system using the following URL (when prompted, login as demoadmin/demoadmin)
Next we are going to create our pie chart. For this, log into your ReportServer and go to the dashboard. Create a new dadget of type static html. Following is the code needed to create a simple pie chart using the above data:
<html>
<head>
<script language="javascript" type="text/javascript"
src="http://www2.datenwerke.net/files/blog/js/jqplot/jquery.min.js">
</script>
<script language="javascript" type="text/javascript"
src="http://www2.datenwerke.net/files/blog/js/jqplot/jquery.jqplot.min.js">
</script>
<script class="include" type="text/javascript"
src="http://www2.datenwerke.net/files/blog/js/jqplot/plugins/jqplot.pieRenderer.min.js">
</script>
<link rel="stylesheet" type="text/css"
href="http://www2.datenwerke.net/files/blog/js/jqplot/jquery.jqplot.min.css" />
</head>
<body style="background-color:#fff">
<div id="chart1" style="height:500px;width:500px; "></div>
<script type="text/javascript">
$.getJSON( 'http://rstest.datenwerke.net/reportserver/reportexport?id=22&c_1=OFF_
CITY|country&c_2=CUS_CUSTOMERNAME|count&agg_2=COUNT&format=json', function(json) {
var data = [];
$.each( json, function( key, val ) {
data.push( [val.country, Number(val.count)] );
});
var plot1 = jQuery.jqplot ('chart1', [data], {
title: 'Customers per office',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value'
}
}, grid: {
background: "#fff",
borderWidth: 0,
shadow: false
}, legend: {
show: true
}
});
});
</script>
</body>
</html>There are three basic parts to this script. The first is the head section of the HTML, where we load the required javascript libraries. Next is
$.getJSON( 'http://rstest.datenwerke.net/reportserver/reportexport?id=22&c_1=OFF_
CITY|country&c_2=CUS_CUSTOMERNAME|count&agg_2=COUNT&format=json', function(json) {
var data = [];
$.each( json, function( key, val ) {
data.push( [val.country, Number(val.count)] );
});which uses jquery to load the json data and to create a data array that is needed for jqplot. Finally we have the actual plotting of the data.
var plot1 = jQuery.jqplot ('chart1', [data], {
title: 'Customers per office',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value'
}
}, grid: {
background: "#fff",
borderWidth: 0,
shadow: false
}, legend: {
show: true
}
});20.2. Embedding Dashboards via the URL
Similarly to reports (see Section 7.11.) you can also embed the ReportServer dashboard view or individual dashboards without the ReportServer corpus. This may be interesting, for example, to embed a dashboard in a portal like application. The base URL to embed dashboards is
http://SERVER:PORT/reportserverbasedir/ReportServer.html#inlinedashboard/
which then takes key value pairs where key and values are separated by colons (:) and the next key is separated by an ampersand (&). To display the dashboard of the currently logged in user add the type that is:
http://SERVER:PORT/reportserverbasedir/ReportServer.html#inlinedashboard/type:user
This displays the complete dashboard view, that is, all dashboards of the currently logged on user. You can also access a specific dashboard, say the first one by adding the type:single and nr:1 parameters as follows
http://SERVER:PORT/reportserverbasedir/ReportServer.html#inlinedashboard/type:single&nr:1
Finally, you can also display a dashboard from the dashboard library via its id. In this case, also select type:single but instead of nr use id. For example, to display the dashboard with id 25 use
http://SERVER:PORT/reportserverbasedir/ReportServer.html#inlinedashboard/type:single&id:25