HDI Installation guide

HDI Installation Guide

Here, we are going to discuss installation process of HDI. Installation process of HDI is very simple, you just need to follow below mentioned steps:

STEP-1

Get or download the latest .war file of HDI.

STEP-2

Copy this war file to {TOMCAT-HOME}/webapps folder. After few seconds, you can see Tomcat has created one folder with the same name of copied war file. For example, after deploying hdi.war file, hdi folder will be created at the same location.

STEP-3

Open {TOMCAT_HOME}/webapps/hdi/WEB-INF/classes/project.properties file with any file editor.

i) Find settingPath parameter and replace with file location of setting.xml.

settingPath ={setting.xml Location}

e.g.

settingPath = C:/EFW/System/Admin/setting.xml

Description:

This parameter indicates location of setting.xml file, which comes under EFW folder. This setting.xml file contains EFW project settings.

ii) Find schedularPath parameter and replace with file location of scheduling.xml.

 

schedularPath = {scheduling.xml location)

e.g.

schedularPath = C:/EFW/System/scheduling.xml

Description:

scheduling.xml file contains information of scheduled reports and related data.

STEP-4:

Open {TOMCAT_HOME}/webapps/hdi/WEB-INF/classes/log4j.properties file in any file editor:

Find log4j.appender.file.File parameter, and replace with:

log4j.appender.file.File= {Location where you want to generate application logs for debugging}

e.g

log4j.appender.file.File=C:/EFW/loggingFile.log

STEP-5:

Open {TOMCAT_HOME}/webapps/hdi/WEB-INF/spring-mvc-servlet.xml file with any file editor.

Configure your database to which the application (HDI) is going to store information such as user credantials. As shown in following example in the specified tag of the XML:

e.g.

 <bean id=”dataSource” class=”org.apache.commons.dbcp.BasicDataSource” destroy-method=”close”>

        <property name=”driverClassName” value=”com.mysql.jdbc.Driver”/>

        <property name=”url” value=”jdbc:mysql://localhost:3306/hdi”/>

        <property name=”username” value=”username”/>

        <property name=”password” value=”password”/>

  </bean>

NOTE:

You can also configure database connection pooling (in the same XML as mentioned above), which application is going to use for login related connections.

License Deployment:

  • Get HDI License file and copy at {TOMCAT_HOME}/webapps/hdi/hdi.licence

NOTE:

  • Tomcat user should have R/W access on the war file.
  • Tomcat user should have R/W access on the HDI-SOLUTION directory (EFW).
  • Tomcat user should have R/W access on the LICENSE file.

EFW-Project Deployment:

  • Get EFW project from prescribed location.
  • Copy EFW Folder to suitable location.
  • Open setting.xml  with any file editor. You can find this file at location:

C:/EFW/System/Admin/setting.xml

  • Find <efwSolution> xml tag and give location of your EFW solution folder. E.g.

 

<efwSolution>C:\\EFW\\EFW</efwSolution>

 

Now, we are done. We have installed HDI successfully. You can access using

http://<host>:<port>/hdi

e.g.

http://localhost:8080/hdi

 

 NOTE:  Here, We assume we deployed EFW folder at location C:/EFW/

 

 

Thanks

Sharad Sinha

Need of BI framework / BI platform: Helical Dashboard Insights (HDI)

Business is changing very rapidly, so is their requirement and needs, organizations generally spends a lot on transactional system to help automate the key business process and spends equally on business intelligence tool to find some useful information from the enormous amount of generated data (transactional data). Nowadays Business Intelligence tools are the most important part of any organization. Some of the organizations purchase the BI tools from the BI vendor if their requirement is fulfilled from that tool; in some cases they develop in-house these tools if their requirement is complex. Let’s evaluate both the approaches.

BI Component / parameters Popular BI tool from market Home grown BI tool
Time Ready to use Organization has to wait till it is ready to use
BI resources You will need BI tool specialist to work on your purchased tool or find a outsourced vendor who supports you to design and develop your BI needs Since this tool is developed in-house you need not have to worry about find a vendor or resources for developing your BI solutions
Training You have to train your resources so that your team will be able to use the BI solutions effectively. No or very less amount of training is required (requirements have come from the same business users).
Support You have to completely rely on the BI tool provider company. This is not the problem in case of n-house developed product.
BI flavors BI tools come with different flavors for example, basic edition, professional edition, enterprise edition. It is very difficult to decide on which suits your need. Designing and developing your own BI tools helps you to add whatever flavor you want to add.
BI software Update problem You need to completely rely on the BI tool provider to release their updates, the updates are generally generic in nature, you need to first evaluate it properly before you decide whether to upgrade to new release/update or not. Updates will be designed, developed and tested on your own environment and hence less complicated.
License confusion There are many different ways of selling the licenses. For example, number of users wise, number of servers, number of cores etc. No license
Compatible Environment You need to make your environment compatible with the BI software to get the best output from the purchased BI software. You can design and develop your BI software in such a way that supports your environment.
Risk There is a huge risk associated with selecting a BI provider; you need to follow vendor risk management to be completely assured of whatever you are selecting. Risk in this case is very less.
Money Have to pay hefty amount of money to purchase this tools Slowly you can increase the budget for this tool
BI features Most of the BI features are presented in these tools. In-house develop all the BI features
Customized BI features No, you are restricted to either use all or none. Yes, you can develop the feature in house as per your requirement
Asset to your organization No. Since you don’t have any rights on the BI software Developed code is your own code and act as an asset for your organization.

 

Considering the above list it is best to develop your own BI software. But obviously going that path is have its own disadvantages as mentioned above time is the biggest contributing factor why companies don’t go for in-house development, also not many companies have IT/BI resources who can design/architect the BI software but they know what they are looking for the BI software. The third important factor is money especially in countries like India where company wants all the BI features but they don’t want to spend money for all those features. This brings me to another question “is there a middle way?”

We at Helical are continuously working in providing a middle way, Helical Dashboard Insights (HDI) – a BI framework / BI platform, which has some pre-build features in it by default like

  1. BI repository
  2. security component
  3. reporting component
  4. scheduling component
  5. email component
  6. dashboard component
  7. input control components (should be able to add any type of input controls like dropdown, slider, calendar etc)
  8. front end component (for designing UI)
  9. data visualization component (should have the capability of customizing the visualization/charts and also developers should be able to design their own charts/visualization)
  10. data source component (should be able to communicate with any data sources e.g. relational, noSQL, flat files etc)
  11. exporting component (should be able to extract the report/dashboard in different formats like CSV, Excel, PDFs etc)
  12. Analytics component (Should be able to convert your data into cube for better analysis)
  13. Embedding functionality (should be able to embed the solution to any solutions be it a website, web application, desktop application)
  14. Mobile ready (should be able to see the solution on the mobile)
  15. Plug and play architecture (should be able to add or remove any of the components from the framework)
  16. Caching component
  17. Dashboard / report language to control your reports and dashboards
  18. Software Development Kit (SDK) for developer to create new components

With the above mentioned list of components what you have to do is start altering the code, add more plugins to the BI framework/ BI platform, remove the component which you don’t want, customize completely the BI framework and come with your own BI tool.

Conclusion : With Helical Dashboard Insights (HDI) – a BI framework / BI platform, it is always good to start with as it is future ready, customizable and very light weighted, you can work on top of HDI to come up with your own BI software within no or very less time. From day 1 you are able to utilize this platform for your basic BI needs and then you can start adding more features to it for your more complex BI needs.

Please contact us for questions, demo, feedback, and for other details.

Nitin Sahu | [email protected]

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

Business Intelligence Project Lifecycle

Business Intelligence Project Lifecycle

BI&DW_Project_LifeCycle

Project Planning

Project life cycle begins with project planning. Obviously, we must have a basic understanding of the business’s requirements to make appropriate scope decisions. Project planning then turns to resource staffing, coupled with project task identification, assignment, duration, and sequencing. The resulting integrated project plan identifies all tasks associated with the Lifecycle and the responsible parties.

Project Management

Project management ensures that the Project Lifecycle activities remain on track and in sync. Project management activities focus on monitoring project status, issue tracking, and change control to preserve scope boundaries. Ongoing management also includes the development of a comprehensive communication plan that addresses both the business and information technology (IT) constituencies. Continuing communication is critical to managing expectations; managing expectations is critical to achieving your DW/BI goals.

Business Requirement Definition

Business users and their requirements impact nearly every decision made throughout the design and implementation of a DW/BI system. From our perspective, business requirements sit at the centre of the universe, because they are so critical to successful data warehousing. Our understanding of the requirements influence most Lifecycle choices, from establishing the right scope, modeling the right data, picking the right tools, applying the right transformation rules, building the right analyses, and providing the right deployment support.

Business_Requirement_Definition

Product selection and installation

DW/BI environments require the integration of numerous technologies. Considering business requirements, technical environment, specific architectural components such as the hardware platform, database management system, extract-transformation-load (ETL) tool, or data access query and reporting tool must be evaluated and selected. Once the products have been selected, they are then installed and tested to ensure appropriate end-to-end integration within your DW/BI environment.

Data Modeling

The first parallel set of activities following the product selection is the data track, from the design of the target dimensional model, to the physical instantiation of the model, and finally the “heavy lifting” where source data is extracted, transformed, and loaded into the target models.

Dimensional Modeling

During the gathering of business requirements, the organization’s data needs are determined and documented in a preliminary enterprise data warehouse representing the organization’s key business processes and their associated dimensionality. This matrix serves as a data architecture blueprint to ensure that the DW/BI data can be integrated and extended across the organization over time.

Designing dimensional models to support the business’s reporting and analytic needs requires a different approach than that used for transaction processing design. Following a more detailed data analysis of a single business process matrix row, modelers identify the fact table granularity, associated dimensions and attributes, and numeric facts.

Refer this link for more information on dimensional modeling process:
http://helicaltech.com/dimensional-modeling-process/

Physical Design

Physical database design focuses on defining the physical structures, including setting up the database environment and instituting appropriate security. Although the physical data model in the relational database will be virtually identical to the dimensional model, there are additional issues to address, such as preliminary performance tuning strategies, from indexing to partitioning and aggregations.

ETL Design & Development

Design and development of the extract, transformation, and load (ETL) system remains one of the most vexing challenges confronted by a DW/BI project team; even when all the other tasks have been well planned and executed, 70% of the risk and effort in the DW/BI project comes from this step.

BI Application Track

The next concurrent activity track focuses on the business intelligence (BI) applications.

BI application design

Immediately following the product selection, while some DW/BI team members are working on the dimensional models, others should be working with the business to identify the candidate BI applications, along with appropriate navigation interfaces to address the users’ needs and capabilities. For most business users, parameter driven BI applications are as ad hoc as they want or need. BI applications are the vehicle for delivering business value from the DW/BI solution, rather than just delivering the data.

BI application development

Following BI application specification, application development tasks include configuring the business metadata and tool infrastructure, and then constructing and validating the specified analytic and operational BI applications, along with the navigational portal.

Deployment

The 2 parallel tracks, focused on data and BI applications, converge at deployment. Extensive planning is required to ensure that these puzzle pieces are tested and fit together properly, in conjunction with the appropriate education and support infrastructure. It is critical that deployment be well orchestrated; deployment should be deferred if all the pieces, such as training, documentation, and validated data, are not ready for prime time release.

Maintenance

Once the DW/BI system is in production, technical operational tasks are necessary to keep the system performing optimally, including usage monitoring, performance tuning, index maintenance, and system backup. We must also continue focus on the business users with ongoing support, education, and communication.

Growth

If we have done your job well, the DW/BI system is bound to expand and evolve to deliver more value to the business. Prioritization processes must be established to deal with the ongoing business demand. We then go back to the beginning of the Lifecycle, leveraging and building upon the foundation that has already been established, while turning our attention to the new requirements.

– Archana Verma

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

 

Adding new chart in Helical Dashboard Insight (HDI)

Adding new chart in Helical Dashboard Insight (HDI)

1) Adding the Pie Chart in HDI:-
HDI use D3 (Data-Driven Documents) library. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers.
For adding the Pie chart in the HDI following steps should be followed:-
1) EFW file:- EFW contain the Title, author, description, Template name, visibility of the Dashboard.

2) 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 pie chart component - Order Status</Name>
		<Query>
			<![CDATA[
					select STATUS, count(ORDERNUMBER) as totalorders 
					from ORDERS
					where STATUS in (${order_status})
					group by STATUS;  
			]]>
                </Query>

       <Parameters>
          <Parameter name="order_status" type="Collection" default="'Shipped'"/>
       </Parameters>
</DataMap>

3)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 chart section we specify the chart script.

In Chart Script we set the below variables to customize the Pie chart
Setting Up the Chart


var placeHolder = "#chart_1";
var chartHeader = "Orders By status";
var width = 300,
height = 300;

The query returns 2 columns – ‘STATUS’ and ‘totalorders’.

As in the JasperReport we set Catagary Expression, Value Expression, Tool Tip for the pie chart,same way the Below variables are set accordingly.


var category = "d.data.STATUS";
var values="d.totalorders";
var tooltip = "\"Total orders with status \"+ d.data.STATUS+\" are \"+d.data.totalorders";
var legendValues = "d.STATUS";

You may change the below script directly for further customization


function angle(d)
{
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
$(placeHolder).addClass('panel').addClass('panel-primary');
var radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal().range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0);
var pie = d3.layout.pie().sort(null).value(function(d) { return eval(values); });
var heading = d3.select(placeHolder).append("h3").attr("class", "panel-heading").style("margin", 0 ).style("clear", "none").text(chartHeader);
Creating The SVG Element
var svg = d3.select(placeHolder).append("div").attr("class", "panel-body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Drawing The Pie


var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(eval(category)); });
g.append("text")
.attr("transform", function(d) {
d.outerRadius = radius -10;
d.innerRadius = (radius -10)/2;
return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("fill", "White")
.text(function(d) { return eval(category); });

Drawing The Lable and Title


g.append("title")
.text(function(d){ return eval(tooltip)});
var legend = d3.select(placeHolder).select('.panel-body').append("svg")
.attr("class", "legend")
.attr("width", 75 * 2)
.attr("height", 75 * 2)
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(50," + (i * 20) + ")"; }); legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d){return color(eval(legendValues))});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text (function(d) { return eval(legendValues); });
]]>

4) 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 resources such as :-


<script src="getExternalResource.html?path=UI_Testing/dimple.js"></script>

Below it we create the Divisions for proper alignments and the Position where the Pie Chart should be placed.


<div class="row">
    <div class="col-sm-5">
       <div id="supportChartObj4"></div>
    </div>
    <div class="col-sm-5">
       <div id="supportChartObj5"></div>
    </div>
</div>

Below the Division section,we have Script section we specify the parameters and the chart.

Parameter Creation:-


var select =
{
name: "select",
type: "select",
options:{
multiple:true,
value : 'STATUS',
display : 'STATUS'
},
parameters: ["order_status"],
htmlElementId: "#supportChartObj1",
executeAtStart: true,
map:1,
iframe:true
};

Chart Creation:-


var chart = {
name: "chart",
type:"chart",
listeners:["order_status"],
requestParameters :{
order_status :"order_status"
},
vf : {
id: "1",
file: "Test.efwvf"
},
htmlElementId : "#supportChartObj4",
executeAtStart: true
};

And all the parameters and chart specified in HTML file are passed to the dashboard.init.

This Way Pie chart is Created.

pie

2)Adding the Pie Chart in HDI:-

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

2)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.
Ex:-


<DataMap id="2" connection="1" type="sql" >
       <Name>Query for pie chart component - Order Status</Name>
		<Query>
			<![CDATA[
					select STATUS, count(ORDERNUMBER) as totalorders 
					from ORDERS
					where STATUS in (${order_status})
					group by STATUS;  
			]]>
                </Query>

       <Parameters>
          <Parameter name="order_status" type="Collection" default="'Shipped'"/>
       </Parameters>
</DataMap>

3)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 chart section we specify the chart script.

In Chart Script we set the below variables to customize the Pie chart

Setting Up the Chart


var placeHolder = "#chart_1";
var chartHeader = "Orders By status";
var margin = {top: 20, right: 30, bottom: 30, left: 70},
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

The query returns 2 columns – ‘STATUS’ and ‘totalorders’.

As in the JasperReport we set Catagary Expression, Value Expression, Tool Tip for the pie chart,same way the Below variables are set accordingly.


var category = "d.STATUS";
var values="d.totalorders";
var tooltip = "\"Total orders with Status \"+ d.STATUS+\" are\"+d.totalorders";

You may change the below script directly for further customization


$(placeHolder).addClass('panel').addClass('panel-primary');
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var heading = d3.select(placeHolder).append("h3").attr("class", "panel
heading").style("margin", 0 ).style("clear", "none").text(chartHeader);
var chart = d3.select(placeHolder).append("div").attr("class", "panel-body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Drawing The Bar Chart


x.domain(data.map(function(d) { return eval(category); }));
y.domain([0, d3.max(data, function(d) { return eval(values); })]);
        chart.append("g")
        .attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	chart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	chart.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(eval(category)); })
	.attr("y", function(d) { return y(eval(values)); })
	.attr("height", function(d) { return height - y(eval(values)); })
	.attr("width", x.rangeBand());
	
        chart.selectAll(".bar")
	.append("title")
	.text(function(d){ return eval(tooltip)});

4) 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 resources such as :-


<script src="getExternalResource.html?path=UI_Testing/dimple.js"></script>

Below it we create the Divisions for proper alignments and the Position where the Pie Chart should be placed.


<div class="row">
    <div class="col-sm-5">
       <div id="supportChartObj4"></div>
    </div>
    <div class="col-sm-5">
       <div id="supportChartObj5"></div>
    </div>
</div>

Below the Division section,we have Script section we specify the parameters and the chart.

Parameter Creation:-


var select =
{
name: "select",
type: "select",
options:{
multiple:true,
value : 'STATUS',
display : 'STATUS'
},
parameters: ["order_status"],
htmlElementId: "#supportChartObj1",
executeAtStart: true,
map:1,
iframe:true
};

Chart Creation:-


var chart = {
name: "chart",
type:"chart",
listeners:["order_status"],
requestParameters :{
order_status :"order_status"
},
vf : {
id: "2",
file: "Test.efwvf"
},
htmlElementId : "#supportChartObj4",
executeAtStart: true
};

And all the parameters and chart specified in HTML file are passed to the dashboard.init.

This Way Bar chart is Created.

Bar Chart