Categories: Java

Code Samples to get started with Google Charts & Visualization APIs

The article describes on some of the aspects related with Google Visualization APIs and how to quickly get started with it. To be able to do justice with this blog and more related blogs to come in near future, I went ahead and create a project, AgileSQM, on Google App Engine (cloud) and used following technologies to create a sample chart as shown below:

  • Google App Engine as platform with Jetty as underlying web server
  • Google NoSQL Datastore
  • Google Visualization APIs
  • Spring MVC (Component model)
  • Bootstrap (UI framework)
  • Eclipse IDE (with Google App Engine platform)

Helpful Bookmarks on Visualization APIs

While getting started with Google Visualization APIs and working on AgileSQM project, following are some of the pages which helped me in a great manner:

Google Charts
https://developers.google.com/chart/
Starting point for developers to get some key learning around google visualization APIs to create charts

Google Visualization API Reference
https://developers.google.com/chart/interactive/docs/reference
The page presents key Javascript objects that helps in creating the plots. Some of these objects are following:

  • DataTable
  • DataView
  • ChartWrapper
  • ChartEditor
  • Query
  • Events
  • Data manipulation methods

Data Source Java Library – Guide & Code Samples
https://developers.google.com/chart/interactive/docs/dev/dsl_about?csw=1
A Guide describes how to use the Google Visualization Data Source Library to implement a data source. One may check out several quick references on code samples and get it going.

Code Playground for Google Visualization
https://code.google.com/apis/ajax/playground/?type=visualization
An interactive web application where one could work with code samples and get their charts done before getting down to actual coding.

 

Key Aspects of Developing with Visualization APIs

Following are some of the key aspects of code that one would require to be done while developing with visualization APIs:

UI-side code to create the charts

  • Load Google AJAX API
  • Load the Google Visualization Library and Google Chart Libraries including the corechart package
  • Custom drawChart function to create the actual chart

There are some key elements to pay attention to. They are following:

// Load Google AJAX API
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
// Load the Google Visualization Library and Google chart libraries including the corechart package
google.load("visualization", "1", {
packages : [ 'corechart' ]
});
google.setOnLoadCallback(drawChart);
// Custom drawChart function to create the charts
function drawChart() {
try {
var data = new google.visualization.arrayToDataTable([
['Employee Name', 'Salary'],
['Mike', {v:22500, f:'18,500'}],
['Bob', 35000],
['Alice', 44000],
['Frank', 27000],
['Floyd', 92000],
['Fritz', 18500]
],
false); // 'false' means that the first row contains labels, not data.
var chart = new google.visualization.LineChart(document
.getElementById( "divId" ));
chart.draw(data, options);
} catch (err) {
alert( err.message );
}
}
</script>
<!-- HTML div container code to contain the drawn chart -->
<div>
<div id="divId" style="width: 800px; height: 400px;"></div>
</div>

Server-side code to create Datatable/JSON object

One may need to create and send JSON object/string to client-side for creating the charts. One may use following technique:

– Use Google Visualization Data sources APIs to create DataTable and render JSON string using JSONRenderer object. Look at the code below:

DataTable data = new DataTable();
data.addColumn(new ColumnDescription("date", ValueType.TEXT, "Sprint Date"));
data.addColumn(new ColumnDescription("velocity",ValueType.NUMBER, "Velocity"));
data.addRowFromValues(dateStr, sqmdo.getVelocity());
return JsonRenderer.renderDataTable(data, true, true).toString();

– Create JSON string directly and send to client side

 

[adsenseyu1]

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

2 months ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago