Google Chart using JSF

We know that Google chart basically displays different statistical data on different chart types such as column chart, bar chart, line chart, pie chart etc. You can have a look at the URL https://developers.google.com/chart/ for more information.

You can integrate Google chart with any server side technology but here I will show you how to integrate Google chart using JSF. This tutorial shows step by step so that we can understand how it happens. It displays the data for area-wise top seven countries in pie chart. You can also use other charts for other purposes. In this example I have used static sample data and the actual data should come from database or other sources. You can change the source of data as per your requirements.

If you have any query please feel free to leave a comment.

Prerequisites

JDK 1.6
Knowledge of JSF, Java
Apache Tomcat v7
Eclipse IDE
javax.faces.jar

Final Output

When chart renders on the view

Google Chart API

When mouse hover happens on chart

Google Chart API

Now we will see how it happens step by step.

Step 1. Create the Dynamic Web Project in Eclipse IDE. The required project structure gets created in the IDE.

Step 2. Put the javax.faces.jar file under WEB-INF/lib directory. This javax.faces.jar is used for JSF framework.

Step 3. Now modify deployment descriptor – web.xml. Paste the below code in your web.xml file.

 

Step 4. Then we will create sample data for showing on Google Pie Chart. So create a class PieChartData.java as shown below. This file contains area-wise top seven countries in the world.

 

Step 5. Now we will create a JSF Managed Bean which will display data in the appropriate view.

 

Step 6. Create a view called jsf.xhtml which will render the Google Pie Chart along with the data from JSF Managed Bean. In view you can initialize data to chart in two ways

or

In the above code look carefully we simply call the backing bean property and add the data to the Google Pie Chart.

 

Step 7. If everything is done please run the application and see yourself. Hit the URL http://<host>:<port>/<context-path>/jsf.jsf. For example  http://localhost:8080/google-chart/jsf.jsf

Thanks for your reading. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

2 thoughts on “Google Chart using JSF

  1. Hi Soumitra,

    This is very good example, But here instated of using tag can you tell me any tag is there.

    I’m pacing some problem using div tag because here div tag id is not possible to update
    using JSF Technology (Framefaces, richfaces)

    EX:

    // Load the Visualization API and the piechart package.
    google.load(‘visualization’, ‘1.0’, {
    ‘packages’ : [ ‘corechart’, ‘table’ ]
    });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
    var data1 = google.visualization.arrayToDataTable(
    #{cnsSMSReportbyEventsBean.graphicEventNames}
    );
    var options1 = {
    colors: [‘green’, ‘red’, ‘blue’, ‘orange’, ‘yellow’],
    legend: { position: ‘right’, alignment: ‘start’, maxLines: 50 },
    bar: { groupWidth: ‘75%’ },
    isStacked: true,
    vAxis: {title: ‘Count’, titleTextStyle: {color: ‘black’}},
    hAxis: {title: ‘Event Names’, titleTextStyle: {color: ‘black’}}
    };

    var chart1 = new google.visualization.ColumnChart(document.getElementById(‘chart_divd’));
    chart1.draw(data1, options1);
    }

    =========================================

    SMS
    Report by Event Names

    =====================================================================

    ===================================================
    whenever we click Search button it will display the graph chart but here after click search button and refresh the then it will display the graph. so here div tag will not be updated. Please tell now instated of using div tag any tag can we use? without refresh page.

    +Seshadri
    7899358262

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.