In this blog we are going to cover the best practices which you should follow while creating a dashboard using dashboard designer of Helical Insight so that by default it looks professional and aesthetically appealing:

  1. On right-click on any component on the dashboard, a user gets option to change the header, background, alignment of the component as well as give border and shadow as required. You can also add your own CSS/JS to the component.
  2. If you right-click on a particular component and select a property that you want to change and you want to change the same property for other components, you do not need to close the panel that opens and open it again for the next component. Simply right-click on the next component and the panel will show the name of that component. You can change the properties of this new component also. This makes the work faster and easier.
  3. Dashboard Designer

  4. Alignment: A properly aligned dashboard looks well organized and less cluttered, even if there are a lot of reports/components on the dashboards.
    • Components on the dashboard can be resized and aligned by dragging them to the required position. You can use grid lines to properly align different components.
    • When you right-click on any component on the dashboard, you will see the Alignment option. This is given to achieve pixel-perfect alignment.
    • The entire dashboard width is considered as 100%. You can give the width of different components considering this fact.
    • It is advisable to give a lesser width to card widgets and more width to charts.
    • You must allow for 1% space minimum between 2 components on the dashboard. This will make the alignment better and the dashboard will look better when you add border or shadow to the components.
    • The alignment should be such that the spacing is equal between all the components. Also, components in the same row should have similar height so that there is a grid structure formed.
    • Similar sized components should be placed one below another. In the below example, dashboard 2 looks more defined and neat.
    • Dashboard Designer

    • For example, let us say that you have a dashboard which has 3 reports to be placed in a row and all should have equal width. We require at least 2% for space between the panels. So, we will calculate width per panel as 98/3=32.66. In order to get a whole number, we can keep 4% for space between panels. So, each panel will width will be 96/3=32. We can utilize the 4% as 2% between any 2 panels or 1% from page border on either side and 1% between each panel.
    • The below image shows how to calculate the alignment for components.

    Dashboard Designer

  5. Grouping and Overlays
    • Grouping is used when:
      • Similar elements need to be aligned or moved together. In the below example, all the input parameters have been grouped together.
      • Dashboard Designer

      • For overlaying images, text, charts etc. to get better aesthetics.
    • To learn how to group elements and overlay them, please refer this blog.
    • Components should be grouped first and then aligned within that group. If you align the components and then make a group, the alignment will be lost when added to the group as it will take default alignment.
    • You can also give the entire group a border so that you know where the group is located.
    • Within a group, the alignment options are pixel-based and not as a percentage of group width.
    • Dashboard Designer

    • The entire group can be given a header, background, border, shadow-like other components on the dashboard. For this, hover on the group. On the left-hand top corner of the group, you will see ungroup and delete options. It is better to right-click here so that any element is not selected by mistake.
    • You can use group overlay and group scroll enable and disable options while aligning different elements inside the group. So, if any element is not visible within the group as it has moved out of viewing space, you can scroll and see it and realign it if required. This is helpful when you do not want to disturb other components on the dashboard.
  6. Colour and Contrast
    • Select a color theme for the dashboard. Use 2-3 colors for the entire dashboard. This will give uniformity to the dashboard. Do not use a lot of colors.
    • In order to select colors, you can use a color wheel available. You can also use one of the below links: https://color.adobe.com/create
    • The above link will allow you to select the number of colors you would like to use (like single color shades, triad, monochrome, complementary colors, etc) and accordingly it will suggest the colors to be used along with their hex code with further customization options.

    • You can also select colors being used in your company logo or presentations.
    • Select colors that contrast with each other and are also soothing to the eye. You can apply the same color theme to reports as well.
    • If you are giving a background to the headers, ensure that the text color is contrasting.
    • It is preferred that the background color for the reports be kept white when using a coloured background. You can use a transparent background or disable background for panels when using a white background.

    Output

    Output

    Output

  7. Borders and Shadows
    • Borders and Shadows can be used to segregate different panels on the dashboard and to give a clean effect.
    • Select shadows that complement the background as well as the panel color.
    • Slightly rounded borders to the various panels makes it look better. To apply rounded corners to borders, you need to apply below CSS at the dashboard level:
    .grid-stack-wrapper{
    border-radius: 5px !important
    }
    

    Dashboard Designer

    You can increase or decrease the radius based on your requirement.

    The above code will apply rounded borders to all the panels on the dashboard, whenever a border is applied to it. If you want the button to have rounded corners, then you must apply the border-radius property to .btn

  8. Text and Images
    • Images can be added to the dashboard to add to the beauty. You can upload images to a separate folder and give the URL to the images. You can also use vectors and images from sites like freepik, flaticon, etc.
    • While using card widgets, if meaningful images are used along with it, then the meaning and beauty of the dashboard increases.
    • Ensure that you use the same font and text size for all text serving the same purpose. For example, select the same font and size for all headers. You can change the font and size for legends, axis labels, other text on the dashboard. This will give uniformity to the dashboard.
  9. Responsiveness
  10. By default the images and text are non-responsive. In order to make the image responsive, give the following CSS at dashboard level.

    @media (max-width:750px){
    
    .img-responsive{
    width: 85% !important;
    height: 99% !important;
    }
    }
    

    Now all the images will be responsive on mobile devices (whose max width is 750 px). To make the images responsive for larger screens, you will have to specify the max-width and min-width after @media tag.

    Similarly, to make text responsive you can define the size of text as viewport and not a pixel. The viewport is responsive and pixels are not responsive.

    You can refer to the below code for reference for Header text responsiveness.

    .ql-align-center{
    font-size: 1.1vw !important;
    }
    
  11. Filters/Input Parameters:
    • Ensure that all the filters and input parameters are placed together and are labeled appropriately. Use headers or text boxes to label the input parameters.
    • If there are multiple parameters, then each time you change an input parameter, a query is fired to the database. Adding a submit button to input parameters will ensure that the dashboard is refreshed only after the required input parameter values are set. This reduces the bandwidth utilization and enhances the performance of the dashboard. It is also more user-friendly. You can refer to this blog to learn how to add submit button.
    • Dashboard Designer

Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered