Skip to content

Instantly share code, notes, and snippets.

@YoelKortick

YoelKortick/example_analytics_google_charts - BarChart.htm

Last active May 30, 2019 13:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save YoelKortick/3ae742f548b6f2549e2c to your computer and use it in GitHub Desktop.
Save YoelKortick/3ae742f548b6f2549e2c to your computer and use it in GitHub Desktop.
Download ZIP
html pages which display Alma analytics reports as pie charts and graphs using APIs and Google charts
Raw
example_analytics_google_charts - BarChart.htm
<html>
<head>
<!--Based on https://developers.google.com/chart/interactive/docs/quick_start -->
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// 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() {
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","https://api-na.hosted.exlibrisgroup.com/almaws/v1/analytics/reports?path=%2Fshared%2FCommunity%2FReports%2FShared%20Reports%2FReports%2FAcquisitions%20-%20Vendor%20analysis%2FEx%20Libris%20-%20Top%205%20vendors%20spending%20YTD&limit=25&apikey=[put here the API key]",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var rows = xmlDoc.getElementsByTagName("Row");
var data = new google.visualization.DataTable();
data.addColumn('string', 'Vendor');
data.addColumn('number', 'Total');
for (var i = 0; i < rows.length; i++) {
data.addRow([
rows[i].getElementsByTagName("Column1")[0].childNodes[0].nodeValue,
parseInt(rows[i].getElementsByTagName("Column2")[0].childNodes[0].nodeValue)
]);
}
//alert (JSON.stringify(data));
// Set chart options
var options = {'title':'Top 5 vendors spending YTD',
'width':800,
'height':600};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Raw
example_analytics_google_charts - PieChart.htm
<html>
<head>
<!--Based on https://developers.google.com/chart/interactive/docs/quick_start -->
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// 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() {
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","https://api-na.hosted.exlibrisgroup.com/almaws/v1/analytics/reports?path=%2Fshared%2FCommunity%2FReports%2FShared%20Reports%2FReports%2FAcquisitions%20-%20Vendor%20analysis%2FEx%20Libris%20-%20Top%205%20vendors%20spending%20YTD&limit=25&apikey=[put here the API key]",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var rows = xmlDoc.getElementsByTagName("Row");
var data = new google.visualization.DataTable();
data.addColumn('string', 'Vendor');
data.addColumn('number', 'Total');
for (var i = 0; i < rows.length; i++) {
data.addRow([
rows[i].getElementsByTagName("Column1")[0].childNodes[0].nodeValue,
parseInt(rows[i].getElementsByTagName("Column2")[0].childNodes[0].nodeValue)
]);
}
//alert (JSON.stringify(data));
// Set chart options
var options = {'title':'Top 5 vendors spending YTD',
'width':800,
'height':600};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment