Introduction
Sometime back I have to develop solution for charts or graphs to show them in Liferay version 6.1.10 or 6.1.20 and I started looking into different charting solutions that are available in market.There are so many solutions available in the market that will let us to create different kind of charts like Pie, Bar, Column, Line and also the combination charts like bar and spline or stacked charts or combination of any basic graphs.
Finally based on my requirement and framework(customized version of Liferay) I decided to go with Google Visualization.So let us see how to show the basic graphs using Google Visualization with Liferay Advanced Content Management System. I mainly used Structure, velocity template and Javascript to develop this solution.
Following are the different graphs that I developed using Google visualization and Liferay CMS.
  |
  |
Technical Details:
The graph or chart that we show can be visualized as point with respect to X and Y axes so based on that I designed my structure as mentioned below
Mainly I designed the structure with the help of 3 elements that are listed below
1. Graph Type - Selection List to choose which graph to draw
2. Slice Name - Text Field is a repeatable section
3. Slice Value - Text Field which is a child to Slice Name.
Slice Name and Slice value represents one point in a graph since its repeatable you can create as many points as you want to show in graph.
That's it use the below mentioned template by mapping it to the structure for rendering the graphs in web content display portlet.
My requirement and customized version of Liferay demanded me to develop this kind of solution. Its also possible to develop the solution as a custom portlet using JSON, AJAX with JSR-286 specification.
Also I recommend if you are looking for more complex charts you can customize the template code which I provided or better to take a look into highcharts which is more flexible to write the velocity template in generating the complex charts.
Hope it helps :)
Comments
Post a Comment