This may require Admin privileges for setup and Builder privileges for implementation.
iDashboards Product Marketing presented by Lincoln Brill (Growth4Ever), Ben Clark (iDashboards Partner Admin) and Ken Rose (iDashboards Software Development) at the iDashboards Conference in Las Vegas on 10/13/2016. Updated 03/05/2021.
Contents
Tip #1 Date Macros
Tip #2 Using SQL in the Filter
Tip #3 Dashboard Scaling
Tip #4 Using Java Script Expressions to Derive Data
Tip #5 Hiding a Sorting Axis
Tip #6 Hiding Axes after Totaling
Tip #7 Providing Instructions on the Dashboard
Tip #8 Making a Rectangle Button
Tip #9 Customizing the User Display Settings
Tip #10 Avoiding the Adobe Flash Player Plugin (Flash Ended 01/15/2021)
Tip #11 Embedding a Dashboard
Tip #12 Creative Dashboard Layouts
Tip #13 Creative Chart Placement
Tip #14 Linking to Images on the Internet
Tip #15 Using the ViFrame Chart (pre v10)
Tip #16 Creating a Dynamic Picklist
Tip #17 Pivot Synchronization
Tip #18 Macros in Chart Titles
Tip #19 Presenting More Than 1000 Data Rows
Tip #20 Embed a Webpage Into a Dashboard
Tip #1 Date Macros
Macros are a feature within iDashboards that allow for dynamic substitution of values. Macros are useful when you would like to indicate a value that changes over time or by context. Types of macros include: value, parameter, user, chart/category and date. Macro values dynamically change based on circumstance whereas a static value is unable to change based on circumstance. In this tip, we discuss a date macro being used with a filter.
For example, you want to create a chart that will show you data between today and 120 days ago. Well, a date macro will dynamically change based on Today offering 120-day rolling a specific period of time relative to today’s date and have that date period rolling.
Testing your date format:
http://www.yourwebserver.com/idashboards/macrotest.jsp
To learn more please see: Builder’s Manual 10.6 Using Filter Macros
Tip #2 Using SQL in the Filter
If the data source is configured to allow custom SQL queries this tip is not needed. However, regardless of the data source, any dynamic chart offers the ability to use the built-in dialog to filter data within the iDashboards Chart Designer.
iDashboards offers a basic UI (User Interface) to add filters to any chart.
However, custom SQL can be used within the same filter dialog box to use advanced filtering techniques. Here, the opportunities are endless!
${param:County} OR (${param:County} = ‘ALLCounties')
To learn more please see: SQL Basics, SQL Server Webinar, Running Total, Optimizing Dashboards, Filtering Data, W3Schools SQL
Tip #3 Dashboard Scaling
Most of the time a dashboard scales larger and smaller without any issues. However, only the graphics scale and not the text. This is to ensure the text maintains a dimensional height for readability across multiple screen sizes. But in the event of extreme scaling, it might be desirable to scale the text. This is common for dashboards built on a computer and displayed on a large LCD monitor. Another purpose for enabling scaling is to ensure a meticulously designed dashboard will display favorably across screens of various dimensions.
Locate the Scaling Options
Within the Dashboard Designer, click the icon shown below.
Once Scaling is enabled, the dashboard will use the CURRENT screen size of your dashboard for the dimensions and aspect ratio. Make adjustments as needed to provide the ideal experience for your end users. Save the dashboard when you are finished and view the dashboard on other screen sizes to see if everything looks great!
To learn more please see: Builder’s Manual 6.3.4 Dashboard Scaling
Tip #4 Using JavaScript Expressions to Derive Data
Getting a grand total of various Y-Axis values:
y1 + y2 + y3
Multiple States and you want “Michigan” at the top:
if (x==’Michigan’) {1}
else {2}
Image Plot and you want the point to blink if a threshold is not met:
if (y1 < param_goal) {1}
else {null}
Image Plot and you want certain points a specific color:
if (x=='Detroit') {'#FF0000'}
else if (x=='New York') {'#00BBCE'}
else if (x=='Houston') {'#FDB724'}
else if (x=='Salt Lake City') {'#F27180'}
else if (x=='Los Angeles') {'#87C979'}
else {'#00BBCE'}
Preventing a “Divide by Zero Error”:
if (y1 == 0) {null}
else {(y2-y1)/y1*100}
Calculating a “Pass” or “Fail” value when only numbers are in the data:
if (y1 >= 70) { 'Pass'}
else {'Fail'}
To learn more please see: Builder’s Manual 9.14.2 Image Plot Chart and 14.1 Derived Columns
Tip #5 Hiding a Sorting Axis
Continuing on the Tip Using JavaScript Expressions to Derive data, if you plan to use a derived column to help with custom sorting.
Example: Custom sorting on the Countries:
if(X = 'United States'){1}
else if(X = 'India'){2}
else if(X = 'United Kingdom'){3}
else {4}
What happens when the sorting values appear in the chart!
Within the Chart Designer, simply hide the derived column used for sorting!
To learn more please see: W3Scoools JavaScript
Tip #6 Hiding Axes after Totaling
Continuing on the Tip Using JavaScript Expressions to Derive Data, if you plan to use a derived column to help create a grand total. After using an expression to calculate data from other axes, hide the reference axes and only display the total:
Expression: Y1 + Y2
Tip #7 Providing Instructions on the Dashboard
Generally speaking, the people who view a dashboard are not the same people who participated in building the dashboard. Therefore, think about adding instructions and notes throughout the dashboard to help people understand and navigate through the information.
Dashboard Note
Using either the Text Panel or HTML Text Panel, add some instructions into a frame.
Chart Note
Chart notes are disabled by default. However, you can simply turn on this feature within the Basic Settings and then configure the look of the note. These notes are helpful on drilldown charts too if they say Click on the buttons on the left to change this chart.
To learn more please see: Builder's Manual 8.5.2.14 Chart Notes and 6.17 Dashboard Panels
Tip #8 Making a Rectangle Button
Buttons can be used to change pivots, make a chart appear within a specific frame (via drilldown), or send a value to the dashboard input parameter. This dashboard has buttons along the left column (six shown).
First, the majority of buttons can be made with static data, as they normally contain two columns and one row of data.
X-Axis <String> Industry |
Y1-Axis <Number> Y |
Industry |
1 |
Next, use a Treemap chart. Customize the properties like this: Hide Legend, Don’t Show Mouse-over Value, Hide Value Label, Range Axis (set to blank), then set the Default Box Color. Of course there are additional properties to define the size, font, etc.
Lastly, configure the Drilldown properties…what is the button going to do when clicked? In this example, the string Industry is sent to the dashboard parameters to filter all of the charts!
This technique is pixel perfect because of the Treemap chart. A previous way of doing this was with raster images, which looks good, but is far from pixel perfect.
Tip #9 Customizing the User Display Settings
This tip needs to address a few different interfaces. After a successful login, there are User Settings to help you set a customized experience. Click the Menu icon (justified paragraph alignment icon) then User Settings. As you can see there are many user specific settings to configure.
Tip #10 Avoiding the Adobe Flash Player Plugin
(***Flash Ended 01/15/2021***)
Desktop App (Currently only way to use pre-v10)
Install the iDashboards Desktop Application to completely avoid the need for a browser and the Adobe Flash Player Plugin. It runs like an application on your computer and offers the entire dashboard building options as the browser.
- Adobe AIR: Offers a consistent environment for out-of-browser applications without needing the Adobe Flash Player plugin. Adobe AIR needs to be downloaded one (1) time and subsequent updates will be automatically guided if the user has an active internet connection. This application needs to be installed first.
- iDashboards Desktop Application: This application needs to be installed after installing Adobe AIR. The application needs to be downloaded one (1) time and subsequent updates will be automatically guided if the user has an active internet connection.
HTML5 v10+
If this is your iDashboards URL: https://idashboards.astro-phys.space and your dashboards work then you are already on non-Flash dashboards! Congrats!
Tip #11 Embedding a Dashboard
iDashboards can be embedded onto an HTML webpage regardless of the license type (named or public access license), and regardless of who is hosting the server (iDashboards or your organization). For years, iDashboards has used 1300x800 for embedding dashboards.
Requirements:
The HTML code and technology you are using must allow for iFrames. Height and Width tags will also be necessary to define the dimensions unless advanced CSS is being used.
The iFrame Tag:
<p>
<iframe src="http://server/idashboards" width="1300" height="800"></iframe>
</p>
The Code (Centered without border):
Try it yourself!
- Copy the code below into a text file
- Edit the URL
- Save it as TEST.HTML
<!DOCTYPE html><html><head>
<title>iDashboards User App</title>
</head>
<body>
<h1 style="text-align: center;">User Application <span style="font-size:16px;"><1300x800></span></h1>
<p style="text-align: center;">
<iframe frameborder="no" width="1300" height="800" src="http://server/idashboards">
</iframe>
</p>
</body>
</html>
Tip #12 Creative Dashboard Layouts
Yes, you can add/remove and split/merge dashboard frames into a vast number of ways.
Creative Background Images
The image on the left was created to be the dashboard background. When dashboard frames were created, they allowed the charts to be positioned within the colorful frames, as shown on the right.
Highlighting a Centralized Chart
In this dashboard, the six buttons on the left each perform a chart-drilldown into the large frame on the right. This keeps the dashboard focused on a single chart and simplifies the information-delivery process.
Tip #13 Creative Chart Placement
Manually Define Frame Borders
Once charts are visually grouped near to one another, it may be helpful to simulate a frame border to surround all of the charts. There are two methods for filling a blank frame with a solid color:
- Set a dashboard background color - Each unused frame that is 0% transparent will display the background color.
- Place a text panel - Any frame can host a simple text panel. Do not type any text, just use it to set the background color.
Group Charts by KPI and Functionality
Sometimes a dashboard can appear overwhelming when there are multiple charts and various KPI’s to examine. Users find it helpful if charts are grouped by KPI and Functionality. For example, group all Sales-related-charts on the left and all Expense-related-charts on the right. Then group charts that are interactive with one-another on the left and charts that have synchronized pivots on the right.
Tip #14 Linking to Images on the Internet
iDashboards would prefer if all of your images were uploaded into the Content directory within the Administrative Application. However, there is the ability to link to images hosted outside of the Content directory.
Test the URL - Yep, simply take the image URL and test it with your browser.
Enable Proxy Server
If you are hosting iDashboards, it will be necessary to enable the Proxy Server within the Administrative System settings. If iDashboards is hosting your server, this will already be enabled.
Add the checkbox, remove the checkbox
When defining the image URL, try both checkbox options for the setting called Use Proxy Server. I don’t know why, but try them both.
Avoid HTTPS - Try removing the letter “s” within “https” to resolve issues.
Troubleshoot the cross-domain policy
Go to the crossdomain.xml URL and interpret the settings. Not all websites will allow streaming connections to their hosted images. <domain>/crossdomain.xml
Tip #15 Using the ViFrame Chart (only Pre-v10)
The ViFrame chart has the extraordinary ability to display additional details that don’t necessarily justify a graphical chart. This chart can be far more substantial than the HTML panel, because the ViFrame chart has the ability to connect to your data and use all of the core iDashboards features (like drilldown, pivot, interactive-intelligence, input parameters, etc.). Think of this chart as a ‘notecard’ or ‘placard’.
The image below has two ViFrame charts.
Using Interactive Intelligence with other charts, these values can change.
Tip #16 Creating a Dynamic Picklist
Quick crash course here; there are three methods to create a pre-defined drop-down list within an Input Parameter. Pay attention to the words Static and Dynamic, as ONLY the Dynamic option will automatically update based on changes in your data.
- Static List: Only exists within the chart/dashboard. Cannot be reused. List values are manually entered.
- Static Picklists: Exists within the iDashboards environment and can be reused across the application. Has the ability to use a Display value and Filter value. List values are manually entered.
- Dynamic Picklists: Exists within the iDashboards environment and can be reused across the application. Has the ability to use a Display value and Filter value. List values are retrieved from a Data Source similar to the process of creating a dynamic chart (select a data source, table, column, filters, etc.). Duplicate values within a column are automatically removed to reveal a unique list of data values.
- Create a picklist by going to the Menu
- Select Picklists
- Now click the (+) to create a picklist
- Please see the Builder's Manual 13.14 Picklists for details
[Picklist Image 1 of 2]
[Picklist Image 2 of 2]
Tip #17 Pivot Synchronization
Some dashboards create scenarios which many charts share a common pivot value. If so, use the dashboard Pivot Synchronization feature. Then, it can be changed in one chart to change all the charts.
Open up the Dashboard Designer, activate Sync Pivots.
Then Save the dashboard.
For better dashboard visualization, hide the Pivot selection on all but main chart by unchecking Show Pivot Selectors option within the Basic Settings within Chart Designer.
Then the following in the specified chart settings just below the Basic Settings, for this we used the Report Settings.
To learn more please see: Builder’s Manual 8.5.3.1 Chart Pivots
Tip #18 Macros in Chart Titles
Meaningful chart titles reflect thoughtful and proper data visualization information for users. In particular when drilling down or utilizing parameters, using the various macro options is perfect for developing meaningful chart titles.
When drilling down be quick to include the values being used for drilling down by adding them as:
${value: <drilldown field>}
If parameters are used, include them to make sure it is clear what the chart is representing as:
${param: <parameter field>}
And let’s not forgot we can also use the date macros. Report as of ${currdate}
To learn more please see: Builder’s Manual macro and Chart Title
Tip #19 Presenting More Than 1000 Data Rows
iDashboards charts can connect to an unlimited amount of data. However, after the chart query takes place (result set), standard charts have a 1,000 row display limit, and pivot charts have a 3,000 row display limit. Most charts utilize small numbers of data records but in some unique instances, displaying more than 1000 records, may be required.
Please Note: depending on the computing environment, the chart may respond a little slower than users are accustomed to. Help end-users realize everything is okay.
Key points to know:
- A pivot axis must be defined on the chart to allow 3000 data records
- Pivot data values can be unique, repeating, or constant
- The pivot axis can map to a data column OR try using a JavaScript Expression (think ALL)
- Works with any chart type
To learn more please see: Builder’s Manual
- 10.7 Adding Macros to Chart Titles
- 13.6 Displaying Input Parameters in Chart Titles
Tip #20 Embed a Webpage Into a Dashboard
Users have the ability to embed an HTML webpage into a dashboard frame!
Rules:
- Preserve Raw HTML must be checked
- Embedded webpage only appears using the iDashboards HTML5 User Application
- Success depends on many undocumented technical variables
In the dashboard builder, select a frame and insert an IFRAME Panel.
End Result:
Please Note: Height and width can be modified to account for the size of your frame.
For More Information:
- iDashboards Builder Manual Chapter 8: Designing Charts
- Dashboard & Chart Design
- Search Knowledge Base
If the above is unable to resolve the issue, then please contact iDashboards Support for further assistance.
Comments
0 comments
Please sign in to leave a comment.