Using HighCharts in BIRT Reports

I would like to use a HighCharts chart type that is not part of the standard chart types in BIRT Designer (I'm using BDP 4.4). I'm not terribly good with report scripting and so I am having some problems getting started. The code for the chart I want to do is <a data-ipb='nomediaparse' href='http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/funnel/'>here</a>, but I don't know how to integrate this code into a BIRT Report.
 
Does someone have or know of a place where I can access an example report that will help get me started?
 
Thanks in advance.

Find more posts tagged with

Comments

jfranken

I have attached an example. It only runs in the HTML emitter. If someone knows how to get it to run in the Web Viewer, PDF, etc., please let me know.
 
Here is a good reference for High Charts:
<a data-ipb='nomediaparse' href='http://www.highcharts.com/docs/getting-started/your-first-chart'>http://www.highcharts.com/docs/getting-started/your-first-chart</a>
 
I put the code in a BIRT Text element. Set the value in the top dropdown to HTML.
 
Please note that this code is meant for guidance purposes only and should not be implemented in a production environment without proper testing.

BRM

Very very helpful. Thank you.
 
Now one more question. How do I get my own data into this?

jfranken

I fixed my code so that the report attached to this post displays a chart in the Interactive Viewer.
 
I don't have time to create an example of how to get your data into the chart. It's more involved. It also depends on the source of the data. You need to create a string that has the form illustrated in the code. Something like:
 
 series: [{ 
 name: 'Jane', 
 data: [1, 0, 4]
 }, { 
 name: 'John', 
 data: [5, 7, 3] 
 }]
 
So in general you need to get the next row of data, format the data as shown above, append it to your string, and repeat the loop for the next row. You can write the loop in JavaScript.
 
Jeff

BRM

Thanks for the help. I played with your original example and managed to get the chart I was interested in to display. But, as you indicate, it only works in HTML mode. In the web viewer the chart takes up the whole window and so you cannot see the data tables.
 
I also played with the custom visualization examples in BDP 4.4. That is a different approach and seems to have a more built in way of getting custom data into the chart script. But I had the same issues wit that approach.
 
Ultimately I went back to fusion charts in flash. I know this is old school but it works and is well documented. Both in terms of the chart scripting documentation and the implementation of that in BIRT.
 
I have to say that I am a bit dismayed that the implementation of non-standard HighCharts in BIRT is such an issue. That chart library offers a lot that the standard designer does not implement. I guess I and my users are resigned to using flash based charts until the documentation for alternative approaches improves.
 
Thanks again.

Clement Wong

It is very possible to expand beyond the standard HighCharts package. Attached is a sample using HighCharts Funnel in a iHub 3.1 Custom Visualization Report Item, which allows for exporting to PDF, and other formats.
 
Here are several other iHub 3.1 Custom Visualization DevShare examples with other JavaScript charts and maps such as D3 or Google Maps:
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/'>http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/</a>
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1129-ihub-31-custom-visualization-google-map-with-heatmap-layer/'>http://developer.actuate.com/community/forum/index.php?/files/file/1129-ihub-31-custom-visualization-google-map-with-heatmap-layer/</a>
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1124-ihub-31-custom-visualization-bipartite-graph-via-d3js/'>http://developer.actuate.com/community/forum/index.php?/files/file/1124-ihub-31-custom-visualization-bipartite-graph-via-d3js/</a>