Google Chart with Liferay Integration | Liferay DXP
  • Services
    Close
      • Enterprise Services
      • Enterprise Portal Development
      • eCommerce Portal Development
      • Enterprise Integration Services
      • ERP Implementation
      • Magento Development Services
      • Cloud and Infrastructure Management
      • Cloud Infra & Management Services
      • Remote Infra Management Services
      • DHIS2 Cloud Hosting Services
      • Consulting Services
      • UX & UI Consulting Services
      • Architectural Consulting Services
      • Performance Tuning & Assessment
      • Liferay Consulting Services
      • DevOps Consulting Services
      • Software Testing Services
      • Software Testing Services
      • Custom Application Development
      • Single Page Application Development
      • Mobile App Development
      • Android Application Development
      • iOS App Development
    Close
  • Solutions
    Close
      • Digital Experience Platform
      • Collaboration Portal Development
      • Intranet Portal Development
      • Enterprise Content Management System
      • Human Resource Management System
      • Hospital Management System
      • Learning Management System
      • Community Portal Development
      • Partner Portal Development
      • Liferay Enterprise Solutions
      • Liferay Portal Development
      • Liferay Migration and Upgrade Services
      • Liferay Consulting Services
      • Liferay Performance Tuning
      • Enterprise Mobility Solutions
      • Network Monitoring Solutions
    Close
  • Products
    Close
      • HRMS
      • Commercium
    Close
  • Resources
    Close
      • Blogs
      • News
      • Events
      • Case Studies
      • White Papers
      • Books
    Close
  • Portfolio
  • en EN
    ar ARnl DUen ENfr FRid INms MAru RS
Inquire Now
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Inquire Now
  • Home
  • Services
    • Enterprise Services
      • Enterprise Portal Development
      • eCommerce Portal
      • Enterprise Integration Services
      • ERP Implementation
      • Magento Development Services
    • Cloud and Infrastructure Management
      • Cloud Infrastructure Management Services
      • Remote Infrastructure Management Services
      • Cloud Hosting Services DHIS2
    • Quality Assurance
      • Software Testing Services
    • Custom Application Development
      • Single Page Application Development
    • Mobile App Development
      • Android Application Development
      • iOS App Development
  • Consulting
    • UX & UI Consulting
    • Architectural Consulting Services
    • Performance Tuning & Assessment
    • Liferay Consulting Services
    • DevOps Consulting Services
  • Solutions
    • Digital Experience Platform
      • Collaboration Portal Development
      • Intranet Portal Development
      • Enterprise Content Management System
      • Hospital Management System
      • Learning Management System
      • Human Resource Management System
      • Community Portal Development
      • Partner Portal Development
    • Enterprise Mobility Solutions
    • Network Monitoring Solutions
  • Products
  • Technologies
  • Resources
    • Case Studies
    • Blogs
    • White Papers
  • Company
    • Who We Are
    • Career
    • Partners
    • News & Events
  • Contact
  1. >
  2. Enterprise
  3. >
  4. Google Chart with Liferay Integration
940 Share
0
0
0
0
0
Liferay Integration
940 Share
0
0
0
0
0

Google Chart with Liferay Integration

Google Charts are free, powerful, simple to use, open source Business Intelligence software which are used to bring timely, actionable data to the right people at the right time. Liferay is a market leading Portal and Digital Experience Platform that is used to deliver amazing user experiences through multiple digital channels including web and mobile to customers, partners, and employees.

Now, will it make sense to deliver actionable business intelligence insights to your user base via your enterprise portal? This is where we see increasing demand in the marketplace to integrate Google Charts with Liferay. This article will give you insights of an approach of not only to deliver a truly integrated, fully responsive User Experience but also the dashboards and reports leveraging your Google Charts.

Use Case

Suppose if you wish to create an interactive dashboard creating reports in Google charts and deliver these charts (reports) responsively through Liferay, allowing these reports to interact with each other. In other words, if you select a bar or part of chart or product category in one chart, you want the other reports on the page to refresh based on the event and the selection made of chart.
Mainly google charts are used to represent data with charts, we can identify our data or progress bar or whatever we are looking for it.

Getting Started

1. Create A Liferay Plug-in portet Your Dashboard.

You can use following reference link to create liferay portlet
https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/creating-a-liferay-mvc-portlet-project
Note: Configure controller class to get data from DB by Java code or Liferay API’s
Your jsp (page) must have as many HTML elements (typically < div > s) to hold both the dashboard, the controls and charts. While instantiating dashboard, control, and chart instances, pass a reference to their element, so assign an ID to each HTML element.

 <!--Div that will hold the dashboard-->
<div id="dashboard_div">

<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div> 

2. Load Your Libraries

A dashboard requires only two libraries to be included or loaded on the page: the Google AJAX API and the Google Visualization controls package. The API (in particular, google.visualization.ChartWrapper) automatically identifies the other packages needed and loads them on the fly without further intervention.
You must use google.charts.load() to fetch the control library.

 <!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> 
Note1:

We can download/save this js libraries and add it in portlet docroot/js folder and confugure it in liferay-portlet.xml file

Note2:

We can add this js libraries in liferay theme as well.

 <script type="text/javascript">// <![CDATA[ // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } // ]]></script> 

3. Prepare Your Data

When the Visualization API has been loaded, google.charts.setOnLoadCallback() will call your handler function, so you know that all the required helper methods and classes will be ready for you to start preparing your data.
Dashboards accepts data in a DataTable, the same as charts.

 var data = google.visualization.arrayToDataTable([
['Employee Name', 'Salary'],
['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
['Bob', 35000],
['Alice', 44000],
['Frank', 27000],
['Floyd', 92000],
['Fritz', 18500]
],
false); // 'false' means that the first row contains labels, not data. 

Note: We can prepare this data dynamically as well(By fetch from DB).

4. Create a Dashboard Instance

After you have created your data, you can instantiate your dashboard object. A dashboard constructor takes one parameter: a reference to the DOM element in which to draw the dashboard.

 var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
Dashboards are exposed as a Javascript class. After instantiating your dashboard, you can perform a few optional steps such as adding event listeners (for example, to be notified once the dashboard is ‘ready’). Dashboards handle events in the same way charts do, so refer to Handling Visualization Events or Displaying Errors Nicely in the chart section for more information.

5. Create Control and Chart Instances

Define as many instances you need for each control and chart, that will be part of the dashboard. Use google.visualization.ChartWrapper and google.visualization.ControlWrapper to define charts and controls respectively.

 // Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});

// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'label'
}
}); 

While creating ChartWrapper and ControlWrapper instances, do not specify either the dataTable or the dataSourceUrl parameter. The dashboard takes care of feeding each of the appropriate data. However, be sure to specify the required parameters: chartType and containerId for charts, controlType and containerId for controls.

A few tips about configuring controls and charts:
You must give all controls a filterColumnIndex (or filterColumnLabel) to specify which column of your google.visualization.DataTable the control operates on (in the example above, the control operates on the column labeled Donuts eaten),
Use the state configuration option on controls to initialize them with an explicit state when they are first drawn. For example, use this setting to fix the initial positions of the thumbs of a range slider control.

 var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'minValue': 1,
'maxValue': 10
},
// Explicitly positions the thumbs at position 3 and 8,
// out of the possible range of 1 to 10.
'state': {'lowValue': 3, 'highValue': 8}
}); 

All the charts that are part of a dashboard share the same underlying dataTable you prepared in the Prepare Your Data step. However, charts often require a specific arrangement of columns to display correctly: for example, a pie chart requires a string column for the label, followed by a number column for the value.

Use the view option while configuring each ChartWrapper instance to declare which columns are relevant for the chart, as in the following example.

 var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8]
]);

var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'title': 'Donuts eaten per person'
},
// The pie chart will use the columns 'Name' and 'Donuts eaten'
// out of all the available ones.
'view': {'columns': [0, 3]}
});

// The rest of dashboard configuration follows
// ... 

6. Draw Your Dashboard

Call the draw() method on the dashboard instance to render the entire dashboard. The draw() method takes only one parameter: the DataTable (or DataView) that powers the dashboard.
You should call draw() every time you change the composition of the dashboard (for example by adding new controls or charts to it) or you change the overall DataTable that powers it.
The dashboard instance fires a ready event whenever draw() terminates drawing all the controls and charts that are part of it. An error event is fired if any of the managed controls or chart fails to draw. To learn more about handling events, see Handling Events.
Note: You should listen for the ready event before you try to change the dashboard composition or draw it again.

7. Programmatic Changes after Draw

Once the dashboard completes the initial draw() it will be live and respond automatically to any action you perform on it (such as changing the selected range of a control slider that is part of the dashboard).
If you need to alter the dashboard state, you can do so by operating directly on the ControlWrapper and ChartWrapper instances that are part of it. The rule of thumb is to perform any change you need directly on the specific ControlWrapper (or ChartWrapper) instance: for example, change a control option or state via setOption() and setState() respectively, and call its draw() method afterward. The dashboard will then update to match the requested changes.

Reference Link:

Google Charts:

https://developers.google.com/chart/

Liferay Portlet:

https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/creating-a-liferay-mvc-portlet-project

Related Blogs

Product Design services

Why a Good Product Design fetch you more Customers?

https://www.knowarth.com/wp-content/uploads/2020/03/Product_Design_Blog.png 400 1140 KNOWARTH Admin https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png KNOWARTH Admin2020-03-26 12:56:062020-03-26 14:19:57Why a Good Product Design fetch you more Customers?
Why Your Business Needs Digital Transformation

4 Reasons Why your Business Needs Digital Transformation

https://www.knowarth.com/wp-content/uploads/2020/03/Why-Your-Business-Needs-Digital-Transformation.png 400 1140 KNOWARTH Admin https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png KNOWARTH Admin2020-03-19 12:28:472020-03-24 11:50:314 Reasons Why your Business Needs Digital Transformation
DXP Vs CMS, What’s Best For Your Business?

Rise of CX : DXP vs CMS, What’s Best for Your Business?

https://www.knowarth.com/wp-content/uploads/2020/02/DXP-vs-CMS_Blog.png 400 1140 Krunal Vyas https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Krunal Vyas2020-02-21 15:38:442020-02-21 16:52:04Rise of CX : DXP vs CMS, What’s Best for Your Business?
Rise of the CX

Rise of the CX: The next Digital Transformation Frontier

https://www.knowarth.com/wp-content/uploads/2020/02/Rise-of-the-CX.png 400 1140 KNOWARTH Admin https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png KNOWARTH Admin2020-02-10 15:23:502020-02-17 11:34:54Rise of the CX: The next Digital Transformation Frontier
More Blogs

Services

  • Enterprise Portal Development
  • eCommerce Portal Development
  • Cloud Infra & Management Services
More Services

Solutions

  • Enterprise Content Management System
  • Learning Management System
  • Hospital Management System
More Solutions

Categories

Digital Experience Platform Enterprise

Related Case Studies

Hospital Management System with Secure Mobile Application

Hospital Management System with Secure Mobile Application

https://www.knowarth.com/wp-content/uploads/2016/12/Hospital-Management-System-with-Secure-Mobile-Application.jpg 657 1920 KNOWARTH Admin https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png KNOWARTH Admin2016-12-30 17:41:182017-01-27 22:48:33Hospital Management System with Secure Mobile Application
Continuous Integration & Deployment Using Chef, AWS Code

Continuous Integration & Deployment using Chef, AWS Code Deploy and AWS OpsWork

https://www.knowarth.com/wp-content/uploads/2016/05/Continuous-Integration-Deployment-Using-Chef-AWS-Code.jpg 657 1920 Chintan Mehta https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Chintan Mehta2016-05-24 15:50:112017-01-30 14:53:39Continuous Integration & Deployment using Chef, AWS Code Deploy and AWS OpsWork
Private Cloud Implementation on Hyper-V

Private Cloud Implementation on Hyper-V

https://www.knowarth.com/wp-content/uploads/2016/05/Private-Cloud-Implementation-on-Hyper-V1.jpg 657 1920 Chintan Mehta https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Chintan Mehta2016-05-12 12:52:002017-01-30 14:53:58Private Cloud Implementation on Hyper-V
Openstack Implementation – Banking Corporation

Openstack Implementation – Banking Corporation

https://www.knowarth.com/wp-content/uploads/2016/03/Openstack-Implementation-–-Banking-Corporation1.jpg 657 1920 Chintan Mehta https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Chintan Mehta2016-03-07 14:31:152017-01-30 14:56:26Openstack Implementation – Banking Corporation
Remote Infrastructure Management Services for a Financial Firm

Remote Infrastructure Management Services for a Financial Firm

https://www.knowarth.com/wp-content/uploads/2016/03/Remote-Infrastructure-Management-Services-for-a-Financial-Firm-.jpg 677 1400 Chintan Mehta https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Chintan Mehta2016-03-07 11:11:542017-01-30 14:56:20Remote Infrastructure Management Services for a Financial Firm

Wearable App for HIPPA / HITECH Compliance Mobile App

https://www.knowarth.com/wp-content/uploads/2016/02/Wearable-App-for-HIPPA-HITECH-Compliance-Mobile-App-USA.jpg 657 1920 Chintan Mehta https://www.knowarth.com/wp-content/uploads/2020/09/knowarth-anblicks-white.png Chintan Mehta2016-02-12 15:05:462017-01-30 14:56:57Wearable App for HIPPA / HITECH Compliance Mobile App
PreviousNext

Follow Us

HRMS-ad-new
MySQL8 For Big Data
Mastering Apache Solr 7.x

Latest Tweets

Tweets by @KNOWARTH
Chintan Mehta
By Chintan Mehta
September 29, 2016

Be the first to get latest blogs
Join our mailing list to get the latest updates! We will not spam you.
Loading

Services

  • Enterprise Portal Development
  • Liferay Consulting Services
  • Mobile App Development
  • Software Testing Services
  • ERP Implementation
  • RIM Services
  • View All Services

Solutions

  • Liferay Portal Development
  • Liferay Migration and Upgrade
  • Digital Experience Platforms
  • Enterprise Mobility Solutions
  • IT Monitoring Solutions
  • Learning Management System
  • View All Solutions

Products

  • Commercium
  • HRMS

Resources

  • Case Studies
  • Blogs
  • Events
  • White Paper
  • Books

Company

  • Who We Are
  • Career
  • Our Partners
  • Our Clients
  • Cookie Policy

ANZ: +61 423 683 702
APAC: +91 98664 98179
USA: +1 (408) 656-6493
marketing@anblicks.com
Core attributes of Liferay Digital Experience Platform Core attributes of Liferay Digital Experience Platform title image Liferay 7 Functional Features Functional Features of Liferay DXP
Scroll to top

Schedule A Consultation

Field marked * are mandatory.