It is always very fascinating to display your data in Maps, and let me take the opportunity to decipher the integration of maps in OBIEE. As part of this series I will discuss on :
1. Integrating Google Geo chart (not map)
2. Integrating NAVTEQ / MVDEMO map with OBIEE
3. Integrating Google map with OBIEE through Mapviewer
For these configuration is similar in OBIEE 11g and 12c and I will demonstrate using OBIEE 11g, however I will mention wherever and change is required for 12c.
To start with let's first discuss, what is Google Chart ?
These charts are from Google, based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. All of them are interactive, and many are pannable and zoomable.
There are many different types of Google charts available, and these become very handy if you want to certain visualizations which are not available in OBIEE.
Go to https://developers.google.com/chart/interactive/docs/gallery to access these charts.
In this case I use Geo Chart.
There can be different options for look and feel, each one of them comes up with a HTML code. If we just copy and paste the code in a text file and save as HTML file it will show the same map with the same interaction.
For the purpose of this post I have considered the first one.
We can further notice that each one these codes has a piece for data, and the data is hard coded. Our objective is to pass data from OBIEE, rather than hard coding it.
To add a Geo chart in an OBIEE report, first I create a report using Country and Popularity.
Next I add a Narrative view and added the following code, the columns need to be changed as per criteria.
a. In the Prefix Section :
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
b. In Narrative Section :
['@1',@2]
This should be preferably in this order only. And @1 should be in '' as it is of type character.
c. In Postfix Section :
]);
var options = {
backgroundColor: '#81d4fa',
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
And I check 'Contains HTML Markup' checkbox.
1. Integrating Google Geo chart (not map)
2. Integrating NAVTEQ / MVDEMO map with OBIEE
3. Integrating Google map with OBIEE through Mapviewer
For these configuration is similar in OBIEE 11g and 12c and I will demonstrate using OBIEE 11g, however I will mention wherever and change is required for 12c.
To start with let's first discuss, what is Google Chart ?
These charts are from Google, based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. All of them are interactive, and many are pannable and zoomable.
There are many different types of Google charts available, and these become very handy if you want to certain visualizations which are not available in OBIEE.
Go to https://developers.google.com/chart/interactive/docs/gallery to access these charts.
In this case I use Geo Chart.
There can be different options for look and feel, each one of them comes up with a HTML code. If we just copy and paste the code in a text file and save as HTML file it will show the same map with the same interaction.
For the purpose of this post I have considered the first one.
We can further notice that each one these codes has a piece for data, and the data is hard coded. Our objective is to pass data from OBIEE, rather than hard coding it.
To add a Geo chart in an OBIEE report, first I create a report using Country and Popularity.
Next I add a Narrative view and added the following code, the columns need to be changed as per criteria.
a. In the Prefix Section :
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
Notice I have changed the column names, this is showing the data labels in map.
['@1',@2]
This should be preferably in this order only. And @1 should be in '' as it is of type character.
c. In Postfix Section :
]);
var options = {
backgroundColor: '#81d4fa',
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Final Output will be look like this with Country name and Popularity.
And we have our map .... 😉😉
No comments:
Post a Comment