Input Parameters for Large Data

Dashboard Designer
#1

Hello Helical Insight,

I am using Helical Insight 4.0. Whenever there is a huge data in input control, the dashboard/report freezes for sometime or takes time to respond back. When clicked on the input parameter, it takes lots of time to open and display the dropdown values. Is there a way to quickly populate the input parameters or improve the user experience?

Thank You,
Snow.

#2

The default input parameters fetches the entire dataset before displaying it. Hence, it takes time to respond back. we are fixing this issue in the upward releases of 4.0 onwards.

For now in order to handle huge data, we have created a new component which will have infinite scroll and use that on the dashboard. With pagination it is able to handle this issue, it even allows you searching option also. As an example, we have created a Select2 or searchable select component.

Follow the below steps

  1. Make sure the efwd file has a query with id and text as columns as below
    <DataMap id="2" connection="1" type="sql" >
    <Name>filter</Name>
    <Query>
    <![CDATA[SELECT "employee_details"."employee_id" as
    "id","employee_details"."employee_name" as "text" from "employee_details"
    ]]>
    </Query>
    </DataMap>

  2. Create a Dashboard using Dashboard designer

  3. Add a variable with name “SelectCompany” in Variables and click on Save
    image

  4. Create a Charts Dashboard Component from Objects
    image

  5. Provide the options as below in Charts - Select options (Choose the efwvf file along with the id)

image

  1. In efwvf file, provide the following
    Note: Use Chart id = 2 for Select2 component and provide the DataSource as Data Map Id from Step(1)

  2. Right click on the Chart component -> Advance -> HTML and provide the below code
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" />
    <div>
    <input id="test" style="width:100px;" placeholder="type a number, scroll for more results" /></div>

  3. Right click on the Chart component -> Advance -> CSS and provide the below code
    .capitalize {
    text-transform: capitalize;
    }
    .select2-container-multi .select2-choices .select2-search-choice {
    padding: 5px 5px 5px 18px;
    }

  4. Right click on the Chart component -> Advance -> JS and provide the below code
    var script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js";

  5. Create the Report input control in the Dashboard by clicking on it like below
    image

  6. Change the Type of input control to “Input” and provide as below
    image

  7. Refresh the Dashboard

  8. Now you can see Select2 input control with infinite scroll which will be able to work with even huge amount of data