Making a Simple Interactive Map in HDI (Helical Dashboard Insights)

 

Creating Interactive and Zoomable Map in HDI (Helical Dashboard Insight)

 
The Goal of this blog is how to make responsive, interactive and zoomable Map in HDI (Helical Dashboard Insights):

For creating the Map in HDI, we are using D3.js , a javascript library.

The Data to use :

A special geospatial file called a Topojson. Here we are going to use a file that is comprised of all US counties. If u go to this link and copy into text file and save it as “us.json” (or anything .json) .

Since we have a county map of USA, we will need some data that is broken down by county. The us.json file we are using only has counties drawn. For this tutorial we are using data from query in json format.

Whatever data you have, make sure that there is a column that associates the information to a naming or id standard that is also present in your map/topojson.

Integrating Map in HDI:

To start integration of Map we have to change four files in HDI.

1) EFW file: EFW contain the Title, author, description, Template name, visibility of the Dashboard.

2) HTML File:HTML file name should be the same that specified in the EFW file under the Template Section.

In HTML File On Top we specify links of the external link and CSS properties.
Here we are using the ‘topojson.js’ external Library and it specified in the HDI as below:

<script src="getExternalResource.html?=Map/topojson.js"></script>

And CSS used to create Map is as follows:

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
body {
 font-family: Arial, sans-serif;
}
.city {
 font: 10px sans-serif;
 font-weight: bold;
}
.legend {
 font-size: 12px;
}
div.tooltip {
 position: absolute;
 text-align: left;
 width: 150px;
 height: 25px;
 padding: 2px;
 font-size: 10px;
 background: #FFFFE0;
 border: 1px;
 border-radius: 8px;
 pointer-events: none;
}

We have to declare one Map component in “Map.html” file and in this component we need to provide the link of the file where the Map chart property is defined.

3) EFWD File: EFWD file contain the Data Source Connection Properties such as connection id and connection type.It also contain Url of the connection to the database, User name and Password to the Database.

The DataSource Details used in our demo is shown as below:-

<DataSources>
        <Connection id="1" type="sql.jdbc">
           <Driver>com.mysql.jdbc.Driver</Driver>
           <Url>jdbc:mysql://192.168.2.9:3306/sampledata</Url>
            <User>devuser</User>
            <Pass>devuser</Pass>
        </Connection>
    </DataSources>

Data Map contains Map id and connection and connection Type. Map id is same as that specified in the EFWVF.

Query for the Data Map and the Parameter to be used is specified in the Tags and Parameter in the Tags.

<DataMap id="2" connection="1" type="sql" >
       <Name>Query for Tooltip </Name>
		<Query>
			<![CDATA[
					SELECT  cl.ID as id,cl.Name as name,sum(fact.votes) as votes
					FROM
					Voting_Summary as fact,region as r,contest as ct,county_list as cl
					where
					fact.region_id=r.region_id and
					fact.contest_id=ct.contest_id and
                   		        cl.Name = r.county	
			]]>
              </Query>
</DataMap>

4)EFWVF File :-

In EFWVF file we first set the chart id the chart we set the chart properties. For Map, we set the Map Properties between the tag. The properties such as Chart name, Chart type, Chart Data Source.

“Path” refers to lines drawn as instructed by our topojson file (us.json). Notice that .legend and .tooltip refer to objects we’ll designate with our javascript, but we can still set what they’ll look like here in the CSS.

You’ll see a lot of “var=”, which is setting up our variables for the code. Note that the first of the variables affect what values map to what colors. See that changing up these variables is an easy way to change the appearance of this map (as well as the CSS).

Colors are coded by RGB HEX value . There are multiple ways to scale colors, but this is the one we’ll go with here.

In Script we set the Map as Below :

Setting the Map Size, Position. And translation.

var width = 960,
 height = 500,
centered; 

Setting up the view:

var projection = d3.geo.albersUsa()
    .scale(1070)   // If scale is specified, this sets the projection’s scale factor to the specified value.
    .translate([width / 2, height / 2]);

Defing Map and Legend Color :

var color_domain = [5000,10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000]
 var ext_color_domain = [0, 5000,10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000]
 var legend_labels = ["< 5000","10000", "15000+", "15000+", "20000+", "25000+", "30000+", "35000+", "40000+", "45000+", "50000+", "55000+", "60000+"]
 var color = d3.scale.threshold()
 .domain(color_domain)
 .range(["#CCE0FF","#B2D1FF","#99C2FF","#80B2FF","#66A3FF","#4D94FF","#3385FF","#1975FF","#005CE6","#0052CC","#0047B2","#003D99","#003380","#002966"]);

The follow portion of code creates a new geographic path generator


var path = d3.geo.path()
    .projection(projection);

The next block of code sets our svg window;

var svg = d3.select("#chart_4").append("svg")
.attr("viewBox", "0 0 " + width + " " + height)
 .style("margin", "10px auto");
var div = d3.select("#chart_4").append("div")
 .attr("class", "tooltip")
 .style("opacity", 0);
svg.append("rect")
    .attr("class", "background")
    .attr("viewBox", "0 0 " + width + " " + height)
    .on("click", clicked);

Since our data file contains the json data returned from query and this data is used to map the tooltip.

 var pairIdWithId = {};
 var pairNameWithId = {};
var pairVotesWithId = {};
 
data.forEach(function(d) {
 pairIdWithId[d.id] = +d.id;
 pairNameWithId[d.id] = d.name;
 pairVotesWithId[d.id] = d.votes; 
 });

here d.id ,d.name and d.votes refer to the column headers of our query.And now we’ll select the svg objects we’ve created but not specified, and map our data onto them:

var g = svg.append("g");
 g.append("g")
 .attr("class", "county")
 .selectAll("path")
 .data(topojson.feature(data1, data1.objects.counties).features)
 .enter().append("path")
 .attr("d", path)
 .on("click", clicked)
 .style ( "fill" , function (d) {
 return color (pairIdWithId[d.id]);
 })
.style("opacity", 0.8)

This will draw each county as an object, each with its own values. Notice that we’ve named this class of object “county”.

If we wanted to change the style of the counties in CSS up at the top, we could just refer to .county and make changes Also the “.data” line associates information from our us.json file with the county objects.

Also important is that “color” refers to the function set above in the code. “Color” expects a number as input, but instead of a specific number, we’re going to give it our container filled with pairs of ID numbers and rate values, and use [d.id] to make sure that we read in a value for each id number.The rest is what happens when the mouse glances over the county:


.on("mouseover", function(d) {
 d3.select(this).transition().duration(300).style("opacity", 1);
 div.transition().duration(300)
 .style("opacity", 1)
 div.text(pairNameWithId[d.id] + " : " + pairVotesWithId[d.id])
 .style("left", (d3.event.pageX) + "px")
 .style("top", (d3.event.pageY -30) + "px");
 })
 .on("mouseout", function() {
 d3.select(this)
 .transition().duration(300)
 .style("opacity", 0.8);
 div.transition().duration(300)
 .style("opacity", 0);
 })

If you want to change what each label is, make sure to adjust the variable “legend_labels.”


var legend = svg.selectAll("g.legend")
 .data(ext_color_domain)
 .enter().append("g")
 .attr("class", "legend");
 
var ls_w = 20, ls_h = 20;
legend.append("rect")
 .attr("x", 20)
 .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
 .attr("width", ls_w)
 .attr("height", ls_h)
 .style("fill", function(d, i) { return color(d); })
 .style("opacity", 0.8);
 
legend.append("text")
 .attr("x", 50)
 .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
 .text(function(d, i){ return legend_labels[i]; });

Function that gives Zoom Functionality to the map


function clicked(d) {
  var x, y, k;
  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
      .style("stroke-width", 1.5 / k + "px");
}

By following these we are able to see the output which is as follows:
D3 Map

-By
Nitin Uttarwar
Helical It Solution

D3 Candle-Stick chart Integration with HDI (Helical Dashboard Insights)

D3 Candle-Stick chart Integration with HDI (Helical Dashboard Insights)

What is HDI:-

HDI allows the developer to create Dynamic chart, Dashboard .It is too much user friendly and developer friendly by the point of customization.

What is D3 Candle-Stick Chart:-

A  Candle-Stick concisely encodes several dimensions of data into a simple glyph.

Required Result set:-

-> Label Which you want to show

-> Actual value which you want to show in your graph( point showing in below picture )

-> Open and close value which will decide the range of your box

-> Deviation value , on which chart calculate the box size.

How to Start Integration:-

To start integration of chart we have to change four files in HDI.

-> EFW file: – In this XML file we have to specify the path of HTML file which we are going to use.

-> EFWD file:- In this file we have to specify two things , first a valid connection detail and second the query which we want to plot in Candle chart.(If you want some parameter then you have to specify the parameter also)

-> EFWVF file:- In this file we have to put our Chart-Script within <Chart> – <prop> (property) tag.(In this File we have to do the change which I will tell later.)

-> HTML file:- In this file we have to specify which EFWVF file we are going to use and what is the chart ID in that EFWVF file in the <Script> tag then we have to add this component in Dashboard-init-function .after that we have to only put the ID , wherever we want in our HTML-file.

Points to be Noted:-

Next to convert Vertical Chart to Horizontal we have to change in script of EFWVF file,

-> First we have to change the axis (Y -> X and X -> Y).

-> Next whisker range. (It will decide the range of box)

-> Then we have to change median.(plotting y1->y2 instead of x1->x2)

“center.enter().append(“line”)”

-> Then legend axis

-> Update Inner quartile box.

“box.enter().append(“rect”)”

 im1 im2 im3

 

Final Output:-

pic4

 

Create CrossTab In HDI(Helical Dashboard Insights) :

Creating CrossTab In Helical Dashboard Insight (HDI)

This blog will teach you how to create Cross Tab in HDI (Helical Dashboard Insights).

CrossTab uses PivotTable.js.Which is a JavaScript Pivot Table Library with drag and drop functionality. ‘PivotTable.js’ basic function is to turn a data set into a summary table and then optionally add a true 2-d drag’n’drop UI to allow a user to manipulate this summary table.

Main functions defined in ‘PivotTable.js’ is pivotUI()and is implemented as jQuery plugins.

PivotUI() takes 3 parameters :

1) Input : input is an array of objects, an array of arrays, a function or a jQuery object referencing a table.Here we are using Json Data as a input.

2) Option : is an object with the following keys:

  • aggregators: dictionary of generators for aggregation functions in dropdown, defaulting to common aggregators.
  • rows: array of strings, attribute names to prepopulate in row area, default is [ ]
  • cols: array of strings, attribute names to prepopulate in cols area, default is [ ]
  • vals: array of strings, attribute names to prepopulate in vals area, default is [ ] (gets passed to aggregator generating function)
  • aggregatorName: string, aggregator to prepopulate in dropdown (key to aggregators object), default is first key in aggregators .

3) Locale: is a string defaulting to en which controls the default locale for things like number formatting and error messages. Regardless of this setting, you can still override the default aggregators (which control number formatting) and error message strings. If this is set to something other than en you will have to load a locale-specific ‘language pack’ which creates this locale object before calling pivotUI().

For adding the Cross Tab in the HDI following steps should be followed:

1) EFW file: EFW contain the Title, author, description, Template name, visibility of the Dashboard.
2) HTML File:HTML file name should be the same that specified in the EFW file under the Template Section.
In HTML File On Top we specify links of the external link.
Here we are using the ‘PivotTable.js’ as external Library and it specified in the HDI as below:

<scriptsrc="getExternalResource.html?=CrossTab/PivotTable.js"></script>

We have to declare one CrossTab component in “CrossTab.html” file and in this component we need to provide the link of the file where the CrossTab chart property is defined.

3) EFWD File:EFWD file contain the Data Source Connection Properties such as connection id and connection type.It also contain Url of the connection to the database, User name and Password to the Database.

The DataSource Details used in our demo is shown as below:-

<DataSources>
        <Connection id="1" type="sql.jdbc">
           <Driver>com.mysql.jdbc.Driver</Driver>
           <Url>jdbc:mysql://192.168.2.9:3306/sampledata</Url>
            <User>devuser</User>
            <Pass>devuser</Pass>
        </Connection>
    </DataSources>

Data Map contains Map id and connection and connection Type. Map id is same as that specified in the EFWVF. Query for the Data Map and the Parameter to be used is specified in the Tags and Parameter in the Tags.

<DataMap id="2" connection="1" type="sql" >
       <Name>Query for CrossTab Component </Name>
		<Query>
			<![CDATA[
					SELECT distinct r.precinct,cd.candidate,sum(fact.votes) votes 
                                        FROM Voting_Summary as fact,region as r,contest as ct,candidate as cd 
                                        where fact.region_id=r.region_id and
                                        fact.contest_id=ct.contest_id and
                                        fact.candidate_id = cd.candidate_id 
                                        group by ct.contest,r.precinct,cd.candidate;

			]]>
              </Query>
</DataMap>

4)EFWVF File :-
In EFWVF file we first set the chart id the chart we set the chart properties. For Pie Chart we set the chart Properties between the tags. The properties such as Chart name, Chart type, Chart Data Source.
In Script we set the CrossTab as Below :

&ltscript&gt
		&lt![CDATA[											   				    
			    $(function(){
				$("#chart_1").pivotUI(data,
					    { 
						    rows: ["precinct"], 
						    cols: ["candidate"],
						    aggregatorName: "Integer Sum",
						    vals: ["votes"] ,
						   
					    }
					    );
			    });			    
						      
			]]&gt
		&lt/script&gt

By following these we are able to see the output which is as follows:
CrossTab

-By
Nitin Uttarwar
Helical It Solution

D3 Bubble Chart Integration with Jaspersoft

In this blog we will be discussing about D3 Bubble Chart Integration with Jaspersoft using HTML method of integration.

All the reports are develop using ireport 5.5 professional and jasper server 5.5

As html component of jasper server does not load any scripts in the html component, we loaded the script in one of the decorator page(jsp page). The page is located at the location:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\WEB-INF\decorators\decorator.jsp

In the page we included the scripts which we want to load. We added the following code in the jsp page at line no 46:

<script type="text/javascript" language="JavaScript"
src="${pageContext.request.contextPath}/scripts/d3.v3.min.js"></script>

The script to be added should be kept at location:

C:\Jaspersoft\jasperreports-server-5.5\apache-tomcat\webapps\jasperserver-pro\scripts

Bubble Chart

Bubble Charts Integration with Jaspersoft

Bubble Charts Integration with Jaspersoft

    Bubble Chart:-


For this chart we need to include one more js script file in the decorator page as described in the start of the document.
The js file is sankey.js and can be downloaded from

http://dimplejs.org/dist/dimple.v1.1.5.min.js

Sample Code is shown below:

var svg = dimple.newSvg("#chartContainer", 1090, 500);
var data = [
{
"Date":"1/1/2011",
"Analyst":"Cidalina Rivera",
"Category":"Application",
"Total Minutes":2114200,
"Minutes Per Item":1100,
"% SLA":80
},
{
"Date":"1/1/2011",
"Analyst":"Kiran Parvathala",
"Category":"Application",
"Total Minutes":391800,
"Minutes Per Item":1959,
"% SLA":21
},
{
"Date":"1/1/2011",
"Analyst":"KrishnaReddy Mavuru",
"Category":"Application",
"Total Minutes":1056125,
"Minutes Per Item":1207,
"% SLA":26
},
{
"Date":"1/1/2011",
"Analyst":"Narasimha Dara",
"Category":"Application",
"Total Minutes":386740,
"Minutes Per Item":610,
"% SLA":30
},
{
"Date":"1/1/2011",
"Analyst":"AslamJavid Shaik",
"Category":"Application",
"Total Minutes":1573856,
"Minutes Per Item":1096,
"% SLA":94
},
{
"Date":"1/1/2011",
"Analyst":"Harini Vemulapalli",
"Category":"Application",
"Total Minutes":2846340,
"Minutes Per Item":1890,
"% SLA":100
},
{
"Date":"1/1/2011",
"Analyst":"William Nelson",
"Category":"Application",
"Total Minutes":1205502,
"Minutes Per Item":662,
"% SLA":40
},
{
"Date":"1/1/2011",
"Analyst":"Janaki Govindarajan",
"Category":"Batch Job",
"Total Minutes":72684,
"Minutes Per Item":673,
"% SLA":79
},
{
"Date":"1/1/2011",
"Analyst":"Chiranjeevi Krishna Karne",
"Category":"Education",
"Total Minutes":542348,
"Minutes Per Item":3307,
"% SLA":52
},
{
"Date":"1/1/2011",
"Analyst":"Masaru Hirata",
"Category":"Fileshare",
"Total Minutes":129090,
"Minutes Per Item":662,
"% SLA":12
},
{
"Date":"1/1/2011",
"Analyst":"Naveen Kodali",
"Category":"Phone",
"Total Minutes":75076,
"Minutes Per Item":548,
"% SLA":84
},
{
"Date":"1/1/2011",
"Analyst":"JoshyPeter Joseph",
"Category":"Phone",
"Total Minutes":574860,
"Minutes Per Item":2948,
"% SLA":27
},
{
"Date":"1/1/2011",
"Analyst":"Maheshwar Malkapuram",
"Category":"Phone",
"Total Minutes":19845,
"Minutes Per Item":105,
"% SLA":92
},
{
"Date":"1/1/2011",
"Analyst":"Sunil Bhalerao",
"Category":"Procurement",
"Total Minutes":353000,
"Minutes Per Item":1765,
"% SLA":20
},
{
"Date":"1/1/2011",
"Analyst":"Tina Chan-Browne",
"Category":"Report",
"Total Minutes":51121,
"Minutes Per Item":469,
"% SLA":95
},
{
"Date":"1/1/2011",
"Analyst":"Sirajuddin Mohammad",
"Category":"Report",
"Total Minutes":323363,
"Minutes Per Item":1693,
"% SLA":47
},
{
"Date":"1/1/2011",
"Analyst":"Nishanth Nadam",
"Category":"Enterprise",
"Total Minutes":620000,
"Minutes Per Item":10000,
"% SLA":22
},
{
"Date":"1/1/2011",
"Analyst":"Santoshkumar Shinde",
"Category":"Enterprise",
"Total Minutes":715000,
"Minutes Per Item":11000,
"% SLA":90
},
{
"Date":"1/1/2011",
"Analyst":"Keith Moller",
"Category":"Enterprise",
"Total Minutes":948000,
"Minutes Per Item":12000,
"% SLA":100
},
{
"Date":"1/1/2011",
"Analyst":"AshokKumar Sangeetham",
"Category":"Server",
"Total Minutes":1166550,
"Minutes Per Item":7070,
"% SLA":88
}
];
data = dimple.filterData(data, "Date", "1/1/2011");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(400, 60, 500, 330);
myChart.addMeasureAxis("x", "Minutes Per Item");
myChart.addMeasureAxis("y", "Total Minutes");
myChart.addMeasureAxis("z", "% SLA");
myChart.addSeries(["Analyst","Category"], dimple.plot.bubble);
myChart.addLegend(600, 10, 360, 30, "right");
myChart.draw();

    Integration with JasperServer:


The data which we use for developing the calendar view can be fetched from any database. The data fetched from database is stored in a variable and is then accessed in the html component using the same variable. Applying this of process makes the report dynamic instead of static. Few parameters can also be added in the report which can be used in query and/or html component.
Generally for these type of charts we pass a variable which contains required data containing date, hour and a value associated with that particular date and hour. The string is created according to JSON format, so that when accessed in script tag, can be easily converted to JSON object using eval function.
Any variable/parameter can be accessed as shown below:
” var arr =”+$V{variable1}+” ”
Parameter in query:
Select * from table_name
where date between $P{parameter1} and $P{parameter2}

The steps on how to integrate it with jasperserver was discussed in my previous blog(D3 Integrating with Jasperserver).