Google Charts in the Primo UI
Tags: Primo, facets, javascript, JQuery
Last Updated: Mar 03, 2011 10:23
- Description
With the Google Charts API (http://code.google.com/apis/ajax/playground/?type=visualization) you can dynamically create charts and embed these for example in the Primo UI. This addon uses the output from the date facets to generate a column chart in a local facetTile.jsp.
- Author: Timm Siewert
- Additional author(s): Barak Hecht
- Institution: Ex Libris
- Year: 2011
- License: Apache
- Link to terms: Detailed license terms
- Skill required for using this code:
Basic, Advanced - for further development
State
Stable
Programming language
Javascript
Screen captures 
Installation instructions
1.) Copy the file footer_feature.html (especially the Javascript) in the static_html directory (fe_web).
2.) Create a copy of the facetTile.jsp (for example facetTile_LOCAL.jsp) in the tiles directory (fe_web).
3.) Add before <h2> the following line in the facetTile_LOCAL.jsp:
<div id="visualization" style="width: 280px; height: 160px;"></div>
4.) Go to the Primo Backoffice, select the relevant View and click on edit for the "customized layout" (Layout Editor).
5.) Select "Brief Display" and change the "exlidFacetTile" URL to "../tiles/facetsTile_LOCAL.jsp".
6.) Save the layout and go to the tiles configuration in the Views wizard.
7.) Edit the entry for the Static HTML tile by replacing the footer HTML file with "/static_htmls/footer_feature.html".
8.) Deploy the View.
9.) Enjoy a nice column chart in your Primo View :-)
TO DO list
Add links to the charts as they are now only displaying the results.
Bar chart
By changing
new google.visualization.ColumnChart(document.getElementById('visualization')). to
new google.visualization.BarChart(document.getElementById('visualization')).
it is possible to display it as a bar chart.
4 Comments
comments.show.hideAug 25, 2011
Rodrigo Calloni
Hi Timm
It looks great this chart but it didn't show to me. I followed the steps and nothing is showing in the left tile.
Here is the line I added to facetsTile_idb.jsp
<%@ include file="/views/taglibsIncludeAll.jspf" %>
<%@page import="com.exlibris.primo.srvinterface.FacetResultDTO"%>
<div id="visualization" style="width: 280px; height: 160px;"></div>
<h2>Refine Search Results</h2>
Then I also added the file footer_feature.html and edited the view. All deployed after that.
Is there anything else we need to do?
Thanks
Rodrigo
Aug 26, 2011
Timm Siewert
Hi Rodrigo,
sounds to me that you have missed the entry in the Layout editor:
4.) Go to the Primo Backoffice, select the relevant View and click on edit for the "customized layout" (Layout Editor).
5.) Select "Brief Display" and change the "exlidFacetTile" URL (from ../tiles/facetsTile.jsp) to "../tiles/facetsTile_idb.jsp".
If this does not help I´m happy to have a look at your view - just send me the URL.
Best,
Timm
Aug 30, 2011
Rodrigo Calloni
Hi Tim
I've repeated the process and same result (no chart). Here is my View: http://dc01vg0016na.hosted.exlibrisgroup.com:1701/primo_library/libweb/action/search.do?vid=idb_test
I can see the footer in action as it is different from the customized version I have.So footer_feature.html is in place.
I also checked the source code of the results list and I couldn't find the addition in the facetsTile_LOCAL.jsp before the <h2>Refine Search Results</h2> line.
Just one information. My view idb_test is located under /customized/idb_test/ directory. It doesn't have a /customized/idb_test/tiles directory.
Thanks!
Rodrigo
Aug 31, 2011
Timm Siewert
Hi Rodrigo,
I have checked your environment and have sent an analysis to you via mail. The short answer is that you need to include the div with the visualization in your facetsTile_LOCAL.jsp - and add this file to the Brief Display area in the Layout Editor.
Best,
Timm