DEVELOPING BUSINESS INTELLIGENCE USING amChart + JSF.

CentrifugeUncategorizedDEVELOPING BUSINESS INTELLIGENCE USING amChart + JSF.
19 September 2018 Posted by Centrifuge Uncategorized No Comments

What is Business Intelligence (BI)?

Business Intelligence (BI) is not a single piece of software or even a suite of software to crunch big data. Instead, it is an umbrella term that includes best business practices, software, infrastructure, and any other tools to optimize decision making and enhance performance.

Uses of Business Intelligence (BI)

  1. It can be used to look at any aspect of your business.
  2. It can be used to see how well your sales efforts are going.
  3. It can be used to assess the efficiency of your manufacturing processes.
  4. It can be used to measure staff performance.

 

amChart

amCharts is a company based in VilniusLithuania. The beginning of amCharts and amMap was in 2004 when the first version of amMap was created.

The first chart was featured in several articles, and people started using it. After a couple of months, line & area chart was introduced. Column & bar chart followed. amCharts started to gain popularity and recognition. Promptly, amCharts’ products entered the ranks of the most popular on the market. Prominent companies started recognizing amCharts as the best charting solution.

Steps on using amChart for JavaEE Web Application on jDeveloper

  1. Create your Custom Application on jDeveloper; with custom application name set to your desired app name, directory set to “mywork” subfolder found inside “jdeveloper” folder and application package prefix left empty or set to desired title.

    Click Next, to move to next step.

Type in your project name, then make sure to add HTML and CSS, Java and JavaServer Faces (JSF) as Project Features.

 

 

Note: The other features like ‘javascript’ and ‘XML’ appear after you select ‘HTML and CSS’ while ‘JSP and Servlets’ appear after you select ‘JavaServer Faces (JSF)’.

Click Next to move to next step.

                           The page below appears next, click finish to finally create your custom application

2. Go to amcharts website: amcharts.com. Navigate to the downloads tab. Once you land on the downloads page, download the Javascript Chart.            Then unzip your downloaded document.

3. On windows, go to jdeveloper folder in your local drive c: within your file explorer. Once you are in the folder, navigate to your public_html like              so: C:\JDeveloper\mywork\amChartBITutorial\amChartBITutorial\public_html

Once you are in the public_html folder paste the unzipped files and folder from your downloaded amChart zipped document.

4. Create a POJO class. Enter any name you wish for the process. Then click ok.      5. For our example chart we will create a chart to describe the age and height distribution in our Centrifuge Office. So enter these variables in you            class like so:

Right click on text-editor, click Generate Accessors; select all, then click ok.     6. Next, we will create a bean to manage the data and business logic. Open the faces-config.xml page. Right click then click “Insert Inside Faces             Config”; click managed-bean. Enter your favourable bean name, class name and package name. Like so:    7. Because we are using the accessors from the pojo class inside the bean class we create an instance of the pojo in the bean class. The bean                class is for business logic where you can perform data manipulations etc

Open your bean file and enter the following code:

public class DevPropsBeans implements Serializable {

private DevProps devProps;

public DevPropsBeans() {

//instantiate the class

devProps = new DevProps();

}

@PostConstruct

public void init(){

}

//setters and getters

public void setDevProps(DevProps devProps) {

this.devProps = devProps;

}

public DevProps getDevProps() {

return devProps;

}

}

8. Lets add a method. Note the constructor is empty for now:

private void CentrifugeDevelopers(){

}

@PostConstruct

public void init(){

}

We will add data to the list objects created in the pojo.

Like so:

private void CentrifugeDevelopers(){

devProps.getDevPropsList().add(new DevProps(“Awe”,”Damilola”,45,”software”,5.69,”Rice”,”Java”,9,”MacOS”));

devProps.getDevPropsList().add(new DevProps(“Ezema”,”Donald”,25,”software”,5.90,”Achicha”,”Java”,4,”Windows”));

devProps.getDevPropsList().add(new DevProps(“Kadiri”,”Ahmed”,29,”software”,5.80,”Beans”,”Java”,2,”Windows”));

devProps.getDevPropsList().add(new DevProps(“Ahmed”,”Abdul”,24,”software”,6.3,”Rice”,”Java”,2,”Windows”));

}

Your page should look like this:

9. Next, we will convert this list into json and pass the values through url.

Lets create JAX RS web service, create a class in the same package called DevPropsWS. We already know how to create a class. WS means             Web Service. Since we are using JAX RS we need to add the lib to the classpath, right click on the project name and select “Project Properties”.

Goto Libraries and Classpath, click “Add Library”. Look for and select, JAX-WS Web Services

Lets define an class level path that the amchart will use to identify the resource. We will use @Path Injection.

The path name is “am”. It can be any name.

10. We need to inject the bean class into the web service. Use the following code:

package amchartbitutorial;

import javax.faces.bean.ManagedProperty;

import javax.ws.rs.Path;

 

@Path(“/am”)

public class DevPropsWS {

@ManagedProperty(“#{dpb}”)

private DevPropsBeans dpBean ;

public DevPropsWS() {

super();

dpBean = new DevPropsBeans();

}

}

Now lets get the into the service.    11. Lastly for the server side programming, we need to inform the server of the incoming request from the client. This is done by creating a path                 (application path) for the server container to listen to when incoming request.

Create a class in the same package and name it DevPropsWSR

We will now create a page for the chart. This can be an ordinary html.

Quickly change the path context of your project to am or anything.

Finally, enter the following code to your html file:

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>

<title>amchart</title>

<script src=”amcharts/amcharts.js”></script>

<script src=”amcharts/serial.js”></script>

<script src=”amcharts/plugins/export/export.min.js”></script>

<script src=”amcharts/themes/black.js”></script>

 

<link type=”text/css” rel=”stylesheet” href=”amcharts/plugins/export/export.css”/>

<script src=”amcharts/plugins/dataloader/dataloader.min.js” type=”text/javascript”></script>

 

</head>

<body>

<div id=”chartdiv” style=”width: 50%; height: 400px;” ></div>

<script type=”text/javascript”>

AmCharts.makeChart( “chartdiv”,

{

“type”: “serial”,

“startDuration”: 1,

“categoryAxis”:{

“gridPosition”:”start”

},

“export”: {

“enabled”: true

},

“chartScrollbar”: {

“enabled”: true

},

“chartCursor”:{

“enabled”:”true”

},

“dataLoader”: {

“url” : “http://127.0.0.1:7101/am/faces/amp/am/devlist”,

“format” : “json”

},

“categoryField”: “firstname”,

“graphs”: [

{

“balloonText”: “[[title]] of [[category]]:[[value]]”,

“fillAlphas”: 1,

“valueField”: “age”,

“title”: “Age”,

“type”: “column”

},

 

{

“balloonText”: “[[title]] of [[category]]:[[value]]”,

“fillAlphas”: 1,

“title”: “Height”,

“valueField”: “height”,

“type”: “column”

},

 

 

],

“valueAxes”: [

{

“id”: “ValueAxis-1”,

“title”: “Age”

},

{

“id”: “ValueAxis-2”,

“position”: “right”,

“gridAlpha”: 0,

“title”: “Height”

}

]

}

);

 

</script>

</body>

</html>

 

Then run the html file.

It should look like this:

Leave a comment

Your email address will not be published. Required fields are marked *

NEED HELP?

Contact us at our office nearest to you or submit a business inquiry online.

Call Us

Pin It on Pinterest