Adhoc Customization

In this article you will learn about customizing charts and data table using Adhoc of Helical Insight.

In Adhoc, a user can generate various reports such as :

  1. Tabular Report
  2. Chart Report
    • Axis Based chart
    • Non-Axis Based chart
  3. Cross-Tabular Report

 

Following are some of the customization which can be applied on table, charts and Cross-Tab :

Table Customization

Sr NoCustomization NameSubCategoryJavaScript CodeCSS Style Codeboth code mandatory
1Header Color Change$('th').css({"background-color": "plum"});.table > thead > tr > th{
background-color: plum;
}		no, you can use either
2Row BandingRemove$('table').removeClass('table-striped');no
3Background Color Change$("table").on("loaded.rs.jquery.bootgrid", function(){
$('tbody > tr').css({"background-color": "grey"});
});		.table > tbody > tr > td{
background-color: thistle;
}		yes
4Table Borderremove 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
5Table Partitionremovehi_container.set("postExecution", function () {
$('table').removeClass('table-bordered');
});		.table > tbody > tr > td, .table > thead > tr > th {
border: none;
border-bottom: 1px solid #DDD;
}		either
6Table TextChange 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
7Row BandingAddOdd:
.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;
}
8Defining Row CountAdd$("#chart").bootgrid("destroy");
$("#chart").bootgrid({rowCount : 15});		script
9Column BandingAddodd:-
.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
10Chess 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
11Shadow to a tableAdd//Table-Shadow
.table { box-shadow: 10px 10px 5px #888888 }
12Heading and Sub-headingAddhi_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

Axis Chart Customization

Sr NoCustomization NameSub CategoryJavaScript CodeCSS Style Codeboth code mandatory
1Chart Resizingadd$(document).ready(function(){
Hdi.c3chart.resize({ height: 400, width: 900 });
});		no
2Axis label coloradd.c3-axis-x > .tick{
fill:green; }
.c3-axis-y > .tick{
fill: red; }		no
3Axis label colorremove / hide.c3-axis-x > .tick{
fill: none; }
.c3-axis-y > .tick{
fill: none; }		no
3Axis Line Coloradd.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
}
4Remove Axis Lineremove 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; }
5Axis Label FormattingAdd.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
14Axis Label renamerenamehi_container.set("postExecution", function () {
Hdi.c3chart.axis.labels({
x: 'Destination place',
y: 'Number of Travels'
});
});
15Axis Legend renamerenamehi_container.set("postExecution", function () {
Hdi.c3chart.data.names({
"min_Cost": 'New Name 1',
"Travel Count" : 'Count of Travel'
});
});
6Change BackgroundAddhi_container.set("postExecution", function () {
$('g.c3-chart > g.c3-event-rects').removeAttr('style'); });		 g.c3-chart > g.c3-event-rects{
fill:yellow;
}		Yes
7Making Chart Transparenthi_container.set("postExecution", function () {
$('.c3').css('opacity','0.3');
});		No
8Heading and Sub-headingAddhi_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
9Change Chart ColorAddhi_container.set("postExecution", function () {
Hdi.c3chart.data.colors({
"Travel Count" : 'Plum'
});
});
10Grid Lines (Y-Axis)Addhi_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;
}
Removehi_container.set("postExecution", function () {
Hdi.c3chart.ygrids.remove([
{value: 26},
]);
});
11Grid Lines (X-Axis)Addhi_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'},
]);
});
12Highlight RegionAddhi_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 RegionRemove1 (selected)hi_container.set("postExecution", function () {
Hdi.c3chart.regions.remove(
{classes: ['regionX', 'regionY']}
);
});
13Hide FieldshidesetTimeout(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 Fieldshidehi_container.set("postExecution", function () {
Hdi.c3chart.hide("Travel Count");
});
16Set Axis rangeaddhi_container.set("postExecution", function () {
Hdi.c3chart.axis.range({
min: { x: -2, y: -150 }, max: { x: 20, y: 200 }
});
});
17Set Background color and opacityaddhi_container.set("postExecution", function () {
$('g.c3-event-rects').css("fill-opacity", "0.2").css("fill", "yellow");
});
18Data Pointsremovehi_container.set("postExecution", function () {
Hdi.c3chart.unload({ ids: ['Abbas', 'Aliqui'] });
});
19Chart TransformationAddhi_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' });
});
20Axis Tick RotateAddhi_container.set("postExecution", function () {
$('.c3-axis-x .tick text').attr('transform','rotate(-90)').css('text-anchor','end');
});
21Chart ThicknessAdd.c3-line{
stroke-width:5px;
}
22Data Points Color ChangeAdd (conditional basis)Hdi.c3chart.data.colors({
'data1': function(d) {
return (d.value >= 7) ? '#00ff00': '#ff0000';
}
});
23Axis 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; }
24Line Color (line Chart)Add.c3-line{
stroke-width:5px;
stroke: yellow !important;
}
25Chart Transform ContinuouslyChanging 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();
});

Non-Axis Chart Customization

Sr NoCustomization NameSub-CategoryJavaScript CodeCSS Style Codeboth code mandatory
1Heading and Sub-headingAddsetTimeout(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
2opacity$(document).ready(function(){
$('.c3').css('opacity','0.2') ;
});
3background colorAdd$(document).ready(function(){
$('.c3').css('background','yellow') ;
});		body{
background:#fffacd;
}		either

Cross-Tab Customization

Sr NoCustomization NameSub-CategoryJavaScript CodeCSS Style Codeboth code mandatory
1Conditional Formatting

(Applicable for only column)		Addhi_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
2Cross Tab HeatMapAddhi_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
3Heading and Sub-headingAddhi_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

In case of issue, post your queries on forum

You May Also Like

Leave a Reply

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