Quantcast
Channel: Jedox BI Blog
Viewing all articles
Browse latest Browse all 140

How to use Highcharts for creating extendable charts

$
0
0

Jedox reports and charts give you a rich interactive experience to find relationships, with interactive visualizations to discover insight. For power users, there are smart ways to enhance those standard Jedox charts, especially if you want to edit the tooltip, or if you want to adjust the design of the diagram. For these scenarios you can use “Highcharts”, which offer a high bandwidth of different chart types. In our example we will create a column chart combined with a line chart. The following figure shows the result:

highchart-1

To get the style of the diagram and the necessary Java Script API you need to write a HTML file, which provides the code for the diagram. By using a widget, you are able to insert this file. In our example we call the file column.html, where we will just consider some code snippets.

series: [{
			type: 'line',
        			dashStyle: 'dot',
			name: 'Units ',
			data: data
…

At this part of the code, the chart type can be adjusted. You can change the “type” for instance to column, line, area etc. The following code snippet shows, how the data array is going to be filled with data:

function __exec(params, cols)
{

for ( i=0; i< params.length; i+=cols) {
			var dta = [];
			dta.push( params[i] );
			dta.push( params[i+1] );
			dta.push( params[i+2] );
			data.push( dta );
…

The data array will be filled by data e.g. the months and the values. These data will be delivered by the parameters at the function above. Following figure shows how to integrate the required HTML file into the widget. The source can be a range in the report sheet for instance:

highchart-2

To use the HTML file, you can put it on your local machine where ever you like to. Just enter the path to the URL. On the right side a combo box enables you to download the chart as e.g. JPEG.  With the chart picture you can work on other applications.

highchart-3

On the following link you can find the whole bandwidth of Highcharts: http://www.highcharts.com/demo . To use this Highchart example on your own you can download the entire project in this .zip file. 

The post How to use Highcharts for creating extendable charts appeared first on Jedox BI Blog.


Viewing all articles
Browse latest Browse all 140

Trending Articles