In this article you will learn about input controls in Helical Insight. The input controls are predefined structures where user gives certain input and based on that output is generated, for example generating a chart for a date range. Mainly, input controls are used in dashboard, charts, reports. In Helical Insight there are certain components available which can be used directly and if not then there is provision to add custom input control based on your business requirement using a script or an HTML.
Following Components are available for use :
- Select
- Select with search
- Date Picker
- Date-Range Picker
- Button
- Charts
- Custom
All the components have some basic and common configuration. The configuration options are listed in the table below
Other BI Tool | BI Framework | |
---|---|---|
Data Connections | Data sources they support is limited. If a new data source type is introduced, you will have to depend on the BI tool provider to supply a new connector for it. | With our BI framework, you can use datasource APIs to extend this functionality in-house. This way, you can start fetching data from any new data source without delay or dependency. |
New charting type | Existing BI tools, in their self-service component, provide certain charting options. However,addition of new chart types which could be reused is not possible. | With our BI framework, you can incorporate newer charts to the adhoc component. Any kind of java scripting chart can be added. This can be reused with any data set by any user. |
New Exporting Type | Most BI tools offer exporting of reports and/or dashboard in PDF and image formats. What if you need it in SAS compatible formats, EDI format etc.? Not possible. | By default, Helical Insight provides support for CSV, PDF, Image formats etc. Additionally, you can use the exporting APIs to add any kind of exporting type which your business demands. |
Data Representation | Traditional BI tools do not offer much in terms of data representation. They might offer reports, dashboards and geographical dashboards. | With our BI framework, not only can you develop traditional reports, dashboards, geomaps etc., you can also develop ones like what-if analysis, mashups, infographs, timelines etc. |
Charts customization and Animation | Traditional BI tool offers some level of chart optimization or customization like color, size etc. | In Helical Insight, adhoc components and dashboard designers have placeholders to add javascript, HTML, CSS and AJAX. Hence you can perform any kind of customization and animation. |
Email Scheduling | Most BI tools support emailing of reports, triggered on time basis. What if you want it to be triggered upon another action such as login or upon touching a value? | With email API, you can schedule for implement and trigger emailing of reports whenever you want. It could be time-based or action-based or value-based. |
New functionality at backend | If a client wants to add a new core functionality at the back-end, like adding a machine learning layer or adding a new caching layer, it is not possible with traditional BI tools. | With Helical Insight, the client is empowered to add functionalities at the back-end using Java. There is no need to depend on vendor's long release cycles or pay hefty sums to implementation partners. |
White Labeling | Traditional BI tools offer very limited white labeling options like header, footer, login and logout screens. | With our BI framework, you can customize absolutely everything from header, footer, notifications, file repository, navigation, context menu etc. |
Workflow | None of the existing BI tools provide an integrated workflow engine. | Helical Insight has an integrated workflow engine, empowering you to create business-specific workflow. Call different modules of different work. Create your own functional modules too. |
Creation and Consumption of solution | Traditional BI tools have different components for reports creation, uploading, plug-ins, PDF extracting etc. | With Helical Insight, creation and consumption of solution is fully browser-based and accessible from anywhere, anytime. No need to download multiple heavy softwares with their own licensing costs |
Select Component
Select component can be used by using type : “select”. It has two modes single and multiple, which can be set via options, which are explained below:
Sr No | Customization Name | SubCategory | JavaScript Code | CSS Style Code | both code mandatory |
---|---|---|---|---|---|
1 | Header Color Change | $('th').css({"background-color": "plum"}); | .table > thead > tr > th{ background-color: plum; } | no, you can use either | |
2 | Row Banding | Remove | $('table').removeClass('table-striped'); | no | |
3 | Background Color Change | $("table").on("loaded.rs.jquery.bootgrid", function(){ $('tbody > tr').css({"background-color": "grey"}); }); | .table > tbody > tr > td{ background-color: thistle; } | yes | |
4 | Table Border | remove table border, define width size, define color | .table > tbody > tr > td, .table > thead > tr > th { border: none; border-bottom: 1px solid #DDD; } /** allows to remove the table borders, define its width size, define its color **/ | no | |
5 | Table Partition | remove | hi_container.set("postExecution", function () { $('table').removeClass('table-bordered'); }); | .table > tbody > tr > td, .table > thead > tr > th { border: none; border-bottom: 1px solid #DDD; } | either |
6 | Table Text | Change color, Size and font | $('table').css({"color" : "green", "font-size":"15px", "font-family":"Serif"}); | .table > tbody > tr > td{ color : red; font-size : 15px; font-family : Consolas; } | either |
7 | Row Banding | Add | Odd: .table > tbody > tr:nth-child(2n+1)> td, .table-sticky.table-striped > tbody > tr:nth-of-type(2n+1)> td{ background-color: palegreen; } | either | |
Even: .table > tbody > tr:nth-child(2n)>td, .table-sticky.table-striped > tbody > tr:nth-of-type(2n)> td { background-color: moccasin; } | |||||
8 | Defining Row Count | Add | $("#chart").bootgrid("destroy"); $("#chart").bootgrid({rowCount : 15}); | script | |
9 | Column Banding | Add | odd:- .table > tbody > tr > td:nth-child(2n+1), .table > thead > tr > th:nth-child(2n+1){ background-color: yellow; } even:- .table > tbody > tr > td:nth-child(2n), .table > thead > tr > th:nth-child(2n){ background-color: blue; } | css / script | |
10 | Chess Pattern | .table > tbody > tr:nth-child(2n) > td:nth-child(2n), .table > tbody > tr:nth-child(2n + 1) > td:nth-child(2n + 1){ background:#000; color: #FFFFFF; font-weight: bold; } | css / script | ||
11 | Shadow to a table | Add | //Table-Shadow .table { box-shadow: 10px 10px 5px #888888 } | ||
12 | Heading and Sub-heading | Add | hi_container.set("postExecution", function () { $('#main').prepend(' Sub-Heading$('#main').prepend(' Heading}); | .heading{ text-align : center; color: green; font-size: 20px; } .subheading{ text-align : center; color: green; font-size: 20px; } | Yes |
Search with Select Component
Select2 component can be used by setting type : “select2”. Similar to select, it has two modes single and multiple, which can be set via options, which are explained below:
Sr No | Customization Name | Sub Category | JavaScript Code | CSS Style Code | both code mandatory |
---|---|---|---|---|---|
1 | Chart Resizing | add | $(document).ready(function(){ Hdi.c3chart.resize({ height: 400, width: 900 }); }); | no | |
2 | Axis label color | add | .c3-axis-x > .tick{ fill:green; } .c3-axis-y > .tick{ fill: red; } | no | |
3 | Axis label color | remove / hide | .c3-axis-x > .tick{ fill: none; } .c3-axis-y > .tick{ fill: none; } | no | |
3 | Axis Line Color | add | .c3 .c3-axis-x path, .c3 .c3-axis-x line { stroke: green; //stroke: none; - hides axis } .c3 .c3-axis-y path, .c3 .c3-axis-y line { stroke: red; //stroke: none; - hides axis } | ||
4 | Remove Axis Line | remove or Hide | .c3 .c3-axis-x path, .c3 .c3-axis-x line { stroke: none; } .c3 .c3-axis-y path, .c3 .c3-axis-y line { stroke: none; } | ||
5 | Axis Label Formatting | Add | .c3-axis-y > .tick { fill: red; font-style: italic; font-family: "Times New Roman"; font-size: 15px; } .c3-axis-x > .tick { fill: green; font-style: oblique; font-family: "Times New Roman"; font-size: 15px; } // font size, font styles and font size | ||
14 | Axis Label rename | rename | hi_container.set("postExecution", function () { Hdi.c3chart.axis.labels({ x: 'Destination place', y: 'Number of Travels' }); }); | ||
15 | Axis Legend rename | rename | hi_container.set("postExecution", function () { Hdi.c3chart.data.names({ "min_Cost": 'New Name 1', "Travel Count" : 'Count of Travel' }); }); | ||
6 | Change Background | Add | hi_container.set("postExecution", function () { $('g.c3-chart > g.c3-event-rects').removeAttr('style'); }); | g.c3-chart > g.c3-event-rects{ fill:yellow; } | Yes |
7 | Making Chart Transparent | hi_container.set("postExecution", function () { $('.c3').css('opacity','0.3'); }); | No | ||
8 | Heading and Sub-heading | Add | hi_container.set("postExecution", function () { $('#main').prepend(' Sub-Heading$('#main').prepend(' Heading}); | .heading{ text-align : center; color: green; font-size: 20px; } .subheading{ text-align : center; color: green; font-size: 20px; } | Yes |
9 | Change Chart Color | Add | hi_container.set("postExecution", function () { Hdi.c3chart.data.colors({ "Travel Count" : 'Plum' }); }); | ||
10 | Grid Lines (Y-Axis) | Add | hi_container.set("postExecution", function () { Hdi.c3chart.ygrids.add([ {value: 20,class:'grid1', text: 'Minimum'}, {value: 40, class:'grid2',text: 'Maximum'} ]); }); // customization of the text and the gridlines | .c3-ygrid-line.grid1 line { stroke: red; } .c3-ygrid-line.grid1 text{ fill: red; font-size: 10px; } .c3-ygrid-line.grid2 line { stroke: green; } .c3-ygrid-line.grid2 text{ fill: green; font-size: 10px; } | |
Remove | hi_container.set("postExecution", function () { Hdi.c3chart.ygrids.remove([ {value: 26}, ]); }); | ||||
11 | Grid Lines (X-Axis) | Add | hi_container.set("postExecution", function () { Hdi.c3chart.xgrids.add([ {value: 20,class:'xgrid0', text: 'Minimum'}, {value: 40, class:'xgrid1',text: 'Maximum'}, ]); }); | .c3-xgrid-line.xgrid0 line { stroke: black; } .c3-xgrid-line.xgrid0 text { fill: black; font-size: 10px; } .c3-xgrid-line.xgrid1 line { stroke: #EFE11A; } .c3-xgrid-line.xgrid1 text { fill: #EFE11A; font-size: 10px; } | |
Grid Lines (X-Axis) | Remove1 (Selected) | hi_container.set("postExecution", function () { Hdi.c3chart.xgrids.remove([ {value: 'Chandigarh'}, ]); }); | |||
12 | Highlight Region | Add | hi_container.set("postExecution", function () { Hdi.c3chart.regions.add( {axis: 'x', start: 1, end: 2, class: 'regionX'}), Hdi.c3chart.regions.add( {axis: 'y', start: 20, end: 40, class: 'regionY'} ); }); // then add the CSS | .c3-region.regionY { fill: red; } .c3-region.regionX { fill: green; } | |
Highlight Region | Remove1 (selected) | hi_container.set("postExecution", function () { Hdi.c3chart.regions.remove( {classes: ['regionX', 'regionY']} ); }); | |||
13 | Hide Fields | hide | setTimeout(function () { // data1 will be hidden. Hdi.c3chart.hide('data1'); // data1 and data2 will be hidden. Hdi.c3chart.hide(['data1', 'data2']); // all targets will be hidden. Hdi.c3chart.hide(); // data1 will be hidden together with its legend. Hdi.c3chart.hide('data1', {withLegend: true}); }); }, 200); | ||
Hide Fields | hide | hi_container.set("postExecution", function () { Hdi.c3chart.hide("Travel Count"); }); | |||
16 | Set Axis range | add | hi_container.set("postExecution", function () { Hdi.c3chart.axis.range({ min: { x: -2, y: -150 }, max: { x: 20, y: 200 } }); }); | ||
17 | Set Background color and opacity | add | hi_container.set("postExecution", function () { $('g.c3-event-rects').css("fill-opacity", "0.2").css("fill", "yellow"); }); | ||
18 | Data Points | remove | hi_container.set("postExecution", function () { Hdi.c3chart.unload({ ids: ['Abbas', 'Aliqui'] }); }); | ||
19 | Chart Transformation | Add | hi_container.set("postExecution", function () { Hdi.c3chart.transform('bar', 'Travel Count' ); Hdi.c3chart.transform('line', 'Cost of Travel' ); Hdi.c3chart.data.colors({ "Cost of Travel" : '#ff7f0e' ,"Travel Count" : '#2ca02c' }); }); | ||
20 | Axis Tick Rotate | Add | hi_container.set("postExecution", function () { $('.c3-axis-x .tick text').attr('transform','rotate(-90)').css('text-anchor','end'); }); | ||
21 | Chart Thickness | Add | .c3-line{ stroke-width:5px; } | ||
22 | Data Points Color Change | Add (conditional basis) | Hdi.c3chart.data.colors({ 'data1': function(d) { return (d.value >= 7) ? '#00ff00': '#ff0000'; } }); | ||
23 | Axis Line ( X & Y axis) | Hide | .c3 .c3-axis-x path, .c3 .c3-axis-x line { stroke: none; } .c3 .c3-axis-y path, .c3 .c3-axis-y line { stroke: none; } | ||
24 | Line Color (line Chart) | Add | .c3-line{ stroke-width:5px; stroke: yellow !important; } | ||
25 | Chart Transform Continuously | Changing charts continuously - hi_container.set("postExecution", function () { //set initial chart colour Hdi.c3chart.data.colors({ 'Number of Employees': '#1FAF96' }); //Map for chart type var typeMap = { "1" : "bar", "2" : "line", "3" : "area", "4" : "spline", "5" : "area-step" }; //Map for different colors per chart type var colorMap = { "1" : "#A9ACE3", "2" : "#E1A9D6", "3" : "#84DFED", "4" : "#EDE588", "5" : "#8CDA94" }; var cntr = 1; function change(){ var changeIt = setInterval(function(){ cntr++; if(cntr > 5){ cntr = 1; } //Change the chart type Hdi.c3chart.transform(typeMap[cntr]); //Change the chart color Hdi.c3chart.data.colors({ 'Number of Employees': colorMap[cntr] }); },1500); //set time to wait before the transform. }; change(); }); |
Date Picker and Date-Range Picker
Date Picker and Date-Range Picker components can be selected by using type : “datepicker” and type : “daterangepicker” respectively. Both components have almost identical options and are explained below:
Common Options
Sr No | Customization Name | Sub-Category | JavaScript Code | CSS Style Code | both code mandatory |
---|---|---|---|---|---|
1 | Conditional Formatting (Applicable for only column) | Add | hi_container.set("postExecution", function(){ function checker(table){ [].forEach.call(table.rows, function(row, i){ if (i===0) return; [].forEach.call(row.cells, function(cell, i){ var cellData = cell.innerHTML.replace(/,/g , ""); var val = parseInt(cellData); if(val >= 50000) cell.style.backgroundColor = 'red'; if(val >= 20000 && val<50000) cell.style.backgroundColor = 'orange'; if(val < 20000) cell.style.backgroundColor = 'yellow'; }); }); }; var table = document.querySelectorAll(".table"); [].forEach.call(table, checker); }); | .hi-pvtTotal, .hi-pvtGrandTotal{ background:none !important; } | require |
2 | Cross Tab HeatMap | Add | hi_container.set("postExecution", function(){ function Interpolate(start, end, steps, count) { var s = start, e = end, final = s + (((e - s) / steps) * count); return Math.floor(final); } function Color(_r, _g, _b) { var r, g, b; var setColors = function(_r, _g, _b) { r = _r; g = _g; b = _b; }; setColors(_r, _g, _b); this.getColors = function() { var colors = { r: r, g: g, b: b }; return colors; }; } function checker(table){ var valArr = []; var cellData; var val; [].forEach.call(table.rows, function(row, i){ if (i===0) return; [].forEach.call(row.cells, function(cell, i){ cellData = cell.innerHTML.replace(/,/g , ""); val = parseInt(cellData); if(!isNaN(val)) valArr.push(val); valArr.sort(function(a, b){return a-b}); }); }); [].forEach.call(table.rows, function(row, i){ if (i===0) return; [].forEach.call(row.cells, function(cell, i){ red = new Color(255, 0, 0), white = new Color(255, 255, 255), start = white, end = red; cellData = cell.innerHTML.replace(/,/g , ""); val = parseInt(cellData); var count = 2+valArr.indexOf(val); var startColors = start.getColors(), endColors = end.getColors(); var r = Interpolate(startColors.r, endColors.r, valArr.length, count); var g = Interpolate(startColors.g, endColors.g, valArr.length, count); var b = Interpolate(startColors.b, endColors.b, valArr.length, count); if(!isNaN(val)) cell.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; }); }); }; var table = document.querySelectorAll(".table"); [].forEach.call(table, checker); }); | // to not color the totals // .hi-pvtTotal, .hi-pvtGrandTotal { // background: none !important; // } | may require / may not require |
3 | Heading and Sub-heading | Add | hi_container.set("postExecution", function () { $('#main').prepend(' Sub-Heading$('#main').prepend(' Heading}); | .heading{ text-align : center; color: green; font-size: 20px; } .subheading{ text-align : center; color: green; font-size: 20px; } | Yes |
Extra Options for daterangepicker
Sr No | Customization Name | Sub-Category | JavaScript Code | CSS Style Code | both code mandatory |
---|---|---|---|---|---|
1 | Heading and Sub-heading | Add | setTimeout(function () { d3.select('#chart svg').append('text') .attr('x', d3.select('#chart svg').node().getBoundingClientRect().width / 2) .attr('y', 8) .attr('text-anchor', 'middle') .attr('id', 'heading') .text('Gender wise Distribution') }, 200); | either | |
2 | opacity | $(document).ready(function(){ $('.c3').css('opacity','0.2') ; }); | |||
3 | background color | Add | $(document).ready(function(){ $('.c3').css('background','yellow') ; }); | body{ background:#fffacd; } | either |
Date Formats
Format | Output | |
---|---|---|
Month | M | 1 2 ... 11 12 |
Month | Mo | 1st 2nd ... 11th 12th |
Month | MM | 01 02 ... 11 12 |
Month | MMM | Jan Feb ... Nov Dec |
Month | MMMM | January February ... November December |
Quarter | Q | 1 2 3 4 |
Day of Month | D | 1 2 ... 30 31 |
Day of Month | Do | 1st 2nd ... 30th 31st |
Day of Month | DD | 01 02 ... 30 31 |
Day of Year | DDD | 1 2 ... 364 365 |
Day of Year | DDDo | 1st 2nd ... 364th 365th |
Day of Year | DDDD | 001 002 ... 364 365 |
Day of Week | d | 0 1 ... 5 6 |
Day of Week | do | 0th 1st ... 5th 6th |
Day of Week | dd | Su Mo ... Fr Sa |
Day of Week | ddd | Sun Mon ... Fri Sat |
Day of Week | dddd | Sunday Monday ... Friday Saturday |
Day of Week (Locale) | e | 0 1 ... 5 6 |
Day of Week (ISO) | E | 1 2 ... 6 7 |
Week of Year | w | 1 2 ... 52 53 |
Week of Year | wo | 1st 2nd ... 52nd 53rd |
Week of Year | ww | 01 02 ... 52 53 |
Week of Year (ISO) | W | 1 2 ... 52 53 |
Week of Year (ISO) | Wo | 1st 2nd ... 52nd 53rd |
Week of Year (ISO) | WW | 01 02 ... 52 53 |
Year | YY | 70 71 ... 29 30 |
Year | YYYY | 1970 1971 ... 2029 2030 |
Week Year | gg | 70 71 ... 29 30 |
Week Year | gggg | 1970 1971 ... 2029 2030 |
Week Year (ISO) | GG | 70 71 ... 29 30 |
Week Year (ISO) | GGGG | 1970 1971 ... 2029 2030 |
AM/PM | A | AM PM |
AM/PM | a | am pm |
Hour | H | 0 1 ... 22 23 |
Hour | HH | 00 01 ... 22 23 |
Hour | h | 1 2 ... 11 12 |
Hour | hh | 01 02 ... 11 12 |
Minute | m | 0 1 ... 58 59 |
Minute | mm | 00 01 ... 58 59 |
Second | s | 0 1 ... 58 59 |
Second | ss | 00 01 ... 58 59 |
Fractional Second | S | 0 1 ... 8 9 |
Fractional Second | SS | 0 1 ... 98 99 |
Fractional Second | SSS | 0 1 ... 998 999 |
Timezone | Z | -07:00 -06:00 ... +06:00 +07:00 |
Timezone | ZZ | -0700 -0600 ... +0600 +0700 |
Unix Timestamp | X | 1360013296 |
Button Components
This component can be accessed by using type: “button”. Using it, one can trigger component update manually, if they don’t want to use listeners. Apart from the common configurations mentioned above, button has one additional configuration and also a different behaviour for executeAtStart which is explained below.
Additional Configuration
Option | Format | Default | Description |
---|---|---|---|
triggers | array | [ ] | It must be an array of the name properties used while defining the components. It will trigger update of all the components in the array on click |
executeAtStart | boolean | FALSE | For button, this specifies if the components specified in triggers are to be updated/initialised after Dashboard.init() |
Options
Option | Format | Default | Description |
---|---|---|---|
display | string | "Submit" | The text to be displayed on button |
classes | string | "btn-primary" | Space separated string of classes to be applied to the button, which can be used for styling or custom actions. |
Charts Component
This component can be accessed by using type: “chart”. Apart from the common configurations mentioned above, chart has one additional configuration which is explained below.
Additional Configuration
Option | Format | Default | Description |
---|---|---|---|
Vf | object | (required) | It must have two keys, namely file and id. file: The name of the file that contains the information about the chart visualizations id: The id of the chart from the visualization file, that is to be displayed |
Options
Option | Format | Default | Description |
---|---|---|---|
actions | array | [ ] | Creates a custom menu. It must be an array of objects and each object must contain a key and value pair where key will be used as id of the element and value will be used as display value. The objects allow for grouping of controls. Note: The actions are to be specified manually by the developer. |
menuLabel | string | 'Actions' | The label to be used for custom menu |
Custom Componenets
This component can be accessed by using type: “custom”. This component can be used to write your custom script. This component has a slightly different configuration.
Configuration
Option | Format | Default | Description |
---|---|---|---|
Name | string | (required) | This will be used as id for the component and also referencing it in other options |
Type | string | (required) | Type is "custom" |
listeners | array | [ ] | A list of variables on whose change, the customScript will be called. |
htmlElementId | string | (required) | This is the jQuery selector of the HTML element, where the component is to be appended. Any selector can be used but using an id is preferred. eg: '#myFirstComponent' |
executeAtStart | boolean | FALSE | This specifies if the component is to be updated/initialised after Dashboard.init() |
customScript | function | (required) | This function has two arguments, first is reference to the element (jQuery Object) given in htmlElementId and the second is an object containing the variables specified in listeners with name as key and its value as value. |
For more Info,
Contact us at : demo@helicalinsight.com