Jump to content

BIRT Developer Center Download


Photo
- - - - -

Trying to integrate an highchart model into Birt Designer Pro

highchart

  • Please log in to reply
11 replies to this topic

#1 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 08 March 2017 - 03:00 AM

Hello everyone,

 

I would like to integrating the highchart model "bubble" into Birt designer Pro (V 4.4.0)

 

I'm ok with using the birt designer, but i'm not used to use script and specifics code/script,

so i used the example on the page : http://developer.act...n-birt-reports/

 

At first i would try to test it on the bubble example, without dynamic data, and i wrote this : 

 

 

var cursor = this.getDataCursor();

function callback() {
 
var chartData = generatechartData();
 
function generatechartData() {
    var chartData = [];
while(cursor.hasNext()) {
var row = cursor.next();
chartData.push([row["DISPLAYTEXT"], row["COUNTOFCUSTOMERS"] ]);
}
return chartData;
}
 
$(function () {
 
 
    $('#high1').highcharts({
        chart: {
           type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
 
    legend: {
        enabled: false
    },
 
    title: {
        text: 'Sugar and fat intake per country'
    },
 
    subtitle: {
    },
 
    xAxis: {
        gridLineWidth: 1,
        title: {
            text: 'Daily fat intake'
        },
        labels: {
            format: '{value} gr'
        },
        plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 65,
            label: {
                rotation: 0,
                y: 15,
                style: {
                    fontStyle: 'italic'
                },
                text: 'Safe fat intake 65g/day'
            },
            zIndex: 3
        }]
    },
 
    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Daily sugar intake'
        },
        labels: {
            format: '{value} gr'
        },
        maxPadding: 0.2,
        plotLines: [{
            color: 'black',
            dashStyle: 'dot',
            width: 2,
            value: 50,
            label: {
                align: 'right',
                style: {
                    fontStyle: 'italic'
                },
                text: 'Safe sugar intake 50g/day',
                x: -10
            },
            zIndex: 3
        }]
    },
 
    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
            '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
            '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
            '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },
 
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
 
    series: [{
        data: [
            { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
            { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
            { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
            { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
            { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
            { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
            { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
            { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
            { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
            { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
            { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
            { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
            { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
            { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
            { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
        ]
   }]
 
});
});
 }

 

 

And my problems are :

 

1) Nothing happens when i lunch the pdf, if you can help me to correct the code ?

I got this error :

 

run phantomjs with errors

/C:/Actuate3/BDPro/eclipse/plugins/com.actuate.phantomjs.win32_1.0.0.v20150710/libs/phantomjs-1.9.7-windows/phantomjs.exe C:\Actuate3\BDPro\eclipse\plugins\com.actuate.webdriver_1.0.0.v20150710\js\rasterize.js file:/C:/Users/TD5477/AppData/Local/Temp/birtViewer/temp/BirtEngineTmp/spa_2725289970552097858.html C:\Users\TD5477\AppData\Local\Temp\birtViewer\temp\BirtEngineTmp\spa_484739312352272194.png {"bookmark":"_bt_bk_1488970316695","width":698,"timeout":1000,"cookies":[{"domain":"127.0.0.1","name":"JSESSIONID","value":"1dv868melhy51t9w0wdg9r0ro"}],"height":519} 
exits with value: 0
Error: Highcharts error #17: www.highcharts.com/errors/17
 
 
 
 
 

 

 

 

2) Can i generate the rapport to the Web viewer (and via IHUB) and not only in pdf ?

 

thanks a lot



#2 sureshpulapalli

sureshpulapalli

    Member

  • Members
  • PipPip
  • 29 posts

Posted 09 March 2017 - 05:15 AM

you can try with Custom Visualization. CV will work in Viewer and also can be exported to pdf.

 

 

Regards,

Suresh



#3 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 09 March 2017 - 05:58 AM

In fact i just succed to make it works. 

I have to put the sources "<script src="https://code.highcha..."></script>..."in the HTML part of the Custom Visualization.

But now i need to looking for a method, to put a map on my bubble chart, and i don't know if it is possible ?



#4 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1105 posts

Posted 10 March 2017 - 03:41 PM

First, set chart's background of the chart to transparent.

 

And the set the CSS for the custom visualization DIV to an image background.

$('#high1').highcharts({
        chart: {
           type: 'bubble',
           plotBorderWidth: 1,
           backgroundColor: 'transparent',
           zoomType: 'xy'           

...

CSS for your HighChart's container (in the CSS tab of the Custom Visualization report item):

#high1 {
    background: url(http://path.to/image.png) no-repeat;
}

JSFiddle example (NOTE: It is a busy chart with the image, but illustrates the technique):

http://jsfiddle.net/p6n412dq


Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com


#5 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 14 March 2017 - 06:59 AM

Oh hi Mr Wong,

 

Thank you really much for your help !! 

 

- Is it possible to use an image from my library and not on internet with the css ?

 

- And i got an another problem,

i need to put a name on every point of my bubble's serie from my dynamics datas, like (name, x , y, z).

I checked on the option reference from highcharts, and it's says : 

 

 

An array of arrays with 3 or 2 values. In this case, the values correspond to x,y,z. If the first value is a string, it is applied as the name of the point, and the x value is inferred. The x value can also be omitted, in which case the inner arrays should be of length 2. Then the xvalue is automatically calculated, either starting at 0 and incremented by 1

 

 

I used your example like this :

 

 

var cursor = this.getDataCursor();

var chartData = generatechartData();
 
function generatechartData() {
    var chartData = [];
while(cursor.hasNext()) {
var row = cursor.next();
//chartData.push([  row["NOM"], row["X_TETE"], row["Y_TETE"], row["SUM_VSOUT_LISS"] ]);
chartData.push([   row["X_TETE"], row["Y_TETE"], row["SUM_VSOUT_LISS"] ]);
}
return chartData;
}
 
 
$(function () {
 
 
    $('#high1').highcharts({
        chart: {
           type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
 
    legend: {
        enabled: false
    },
 
    title: {
        text: 'Titre'
    },
 
    subtitle: {
        text: 'Sous Titre'
    },
 
    xAxis: {
        gridLineWidth: 1,
        title: {
            text: 'Title X'
        },
        labels: {
            format: '{value}'
        },
maxPadding: 0.1,
   },
 
    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Title Y'
        },
        labels: {
            format: '{value}'
        },
        maxPadding: 0.1,
 
    },
 
//    tooltip: {
 //       useHTML: true,
  //      headerFormat: '<table>',
   //     pointFormat: '<tr><th colspan="2"><h3>{point.x}</h3></th></tr>'
//        pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
//            '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
//            '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
//            '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
  //      footerFormat: '</table>',
   //     followPointer: true
   // },
 
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
 
    series: [{
        data: chartData    
   }]
 
});
});
 

 

And then, when i put a string at first in the table, the x value auto-calculates and don't use my "x" value.

so, there is a way to use (x,y,z) dynamics values with a dynamic name on each point ?

 

I really appreciate any help you can provide,

with regards,

Jonathan



#6 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1105 posts

Posted 14 March 2017 - 02:30 PM

Just a thought... Since you are using commercial BIRT, are you not able to use the OOTB HTML5 Bubble Chart?  It's HighCharts based.  Do you need to use a Custom Viz?

 

- Is it possible to use an image from my library and not on internet with the css ?

 

Do you mean from your Resources folder in the iHub?  Yes, you can.

Or an image that's embedded into the .rptdesign?  I'm not aware of a way to do this.

 

 

And then, when i put a string at first in the table, the x value auto-calculates and don't use my "x" value.

so, there is a way to use (x,y,z) dynamics values with a dynamic name on each point ?

 

I would need an example report design that I can run to see what is going on.  Will you be able to create an example from Classic Models that I can run in my environment?


Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com


#7 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 15 March 2017 - 01:59 AM

Just a thought... Since you are using commercial BIRT, are you not able to use the OOTB HTML5 Bubble Chart?  It's HighCharts based.  Do you need to use a Custom Viz?
 
So, i'm afraid i don't know what do you mean by OOTB HTML5 Bubble Chart ?
i heard from an employee of OpenText, that birt include Highcharts modules in the birt designer pro, so i checked on highchart website and tried to use it with a custom viz like you suggest on this forum previously.

But indeed, if there is an option to use directly highchart naturally with birt, i think that will be easier for me.
 
Do you mean from your Resources folder in the iHub?  Yes, you can.
Or an image that's embedded into the .rptdesign?  I'm not aware of a way to do this.
 
I mean with an image embedded yes, but actually from the resources folder in the iHub it's also good :)
 
I would need an example report design that I can run to see what is going on.  Will you be able to create an example from Classic Models that I can run in my environment?
 
As an attached files, i send you a rptdesign with the source file xslx like i work (not real data).

 

Thank you really much for you help.

Attached Files



#8 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1105 posts

Posted 15 March 2017 - 08:19 AM

So, i'm afraid i don't know what do you mean by OOTB HTML5 Bubble Chart ?

In commercial BIRT, the out of the box (OOTB) Chart report item is defaulted to HTML5.  The HTML5 charts are based on HighCharts.

 

Have you dragged a Chart report item from the Palette to the Layout?  Then, when you select the chart type, you have the option to select Bubble chart.  It's under the Stock chart, and above the Difference chart.

 

That's the Bubble chart that you should consider using.  At this time, it doesn't appear that you will need to complicate the design of this report by using the Custom Visualization Report Item.

 

With the (HTML5) Chart Report Item, you can also choose the background image as URI, image from resource, or embedded.  See Edit Chart > Format Chart > Chart Area > Background > Image.  There's a dialog "Select Image" which will show you those options.

 

Another option to add a background is via the Chart Script:

beforeGeneration: function(options)
{
	options.chart.plotBackgroundImage = 'https://www.highcharts.com/samples/graphics/skies.jpg';
},

Attached is a sample -- created in Analytics Designer [iHub 16].

Attached Files


Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com


#9 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 16 March 2017 - 12:45 AM

Oh you mean this chart, i already used it, but in fact this solution it's not convenient graphically, and furthemore i'll need to use several various highchart ("fixed placement columns", "time series zoomable", "synchronized charts"...)

So I need to improve about different highchart's scripts and implementations to use them..

 

So if you kind, to stay on the first solution, and if possible help me about :

 

- To use (name, x , y ,z ) dynamically

- To use a background image from the resources folder in the iHub

 

Many thanks for considering my request.



#10 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1105 posts

Posted 17 March 2017 - 01:31 PM

Please note that the charts that you describe such as "fixed placement columns" or "time series zoomable" are already part of the out of the box BIRT HTML5 charts.  You may need to turn on/off UI option, or change a setting via the UI to get what you need.  And if not, you can tweak it with the same HighCharts script syntax in the Chart Report Item's Edit Chart > Script > Client Script.

 

An example of scripting using the HTML5 charts can be seen in this DevShare (http://developer.act...s-donut-gauges/).

 

So to address your Custom Visualization questions:

 

1.  You get data a different way via this.getData() instead of this.getDataCursor().

 

It will return an Object with columns, labels, and rows.  You can see this in action if you look at the Custom Visualization template named "Heat Map from HighCharts".

 

Or you can put a debugger; statement before your existing code line var chartData = generatechartData();  Then in you can see in the console (for example, in Chrome DevTools) if you type this.getData(), and you can explore the variable and its contents.

 

For example, this.getData().columns.length or this.getData().rows

 

 

2. You can access the images in the /Resources via the following URL.  If you had an images folder in /Resources, and the file name was "rpticon.png".

 

http://iHubServerNam...ges/rpticon.png

 

Or if you wanted to give it a name as recognized by the browser (otherwise, the browser will show "DownloadFile"):

http://iHubServerNam...ges/rpticon.png

 

Please note that the end user will not be able to access those images without first being authenticated into iHub.  If you already a report open, then you will be authenticated and the image will be accessible.


Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com


#11 Neojet

Neojet

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 21 March 2017 - 08:17 AM

"Please note that the charts that you describe such as "fixed placement columns" or "time series zoomable" are already part of the out of the box BIRT HTML5 charts.  You may need to turn on/off UI option, or change a setting via the UI to get what you need.  And if not, you can tweak it with the same HighCharts script syntax in the Chart Report Item's Edit Chart > Script > Client Script."

 

What do you mean by UI, and where can i change the setting of it ? 

The example you provide me, it's not real close to what i want, and so i don't really get how it can helps me.

 

1. Since 2 days i tried to work and understand the script of the "Heat Map from HighCharts", but it's pretty tough and not really the same inputs datas for the chart. 

 

The heat map use :

xAxisCategoriesColumn : "..",

yAxisCategoriesColumn : "..,
seriesValueColumn : ".."
 
to build : the "customize()" and "transform(data)" functions, like : 
xCategories = getAxisArray(data, config.xAxisCategoriesColumn);
yCategories = getAxisArray(data, config.yAxisCategoriesColumn);
 
At first, i don't get what the variable "data" is, i suppose it's from "var data = customViz.getData();"  from the "seriesValueColumn : "..""
 
but i don't have X or Y categories for what i need to do, and the input of the bubble chart are : ( name : "name" , x : "value" , y : "value", z : "value") , wich x,y are coordinates on a plan, so.. :(
 
In fact i'm just looking for the simplest way to put my dynamics input in someting like a table or something else, to be understandable as a data for the buble chart.
 
i'm sorry for using your time, but i'm a beginner as a developer for script.
Thank you really much for you help.


#12 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1105 posts

Posted 22 March 2017 - 11:22 PM

Sorry, the UI is the Edit Chart dialog.  Although there is chart type selection as "fixed placement columns" or "time series zoomable", there are settings in the various dialog options that allow for this.  For example, if you want zoomable, you can enable by clicking on Edit Chart > Format Chart > Chart Area > Axis > X-Axis (or Y-Axis), and the checking the box "Allow zooming".   The time range selector and timeline bottom slider are available too.  Look at Edit Chart > Format Chart > Chart Area > Navigation: (x) Timeline Range Selector and (x) Timeline Bottom Slider checkboxes.

 

As far as the custom visualization, it's all JavaScript.  And to learn more about what variables are available, you can add "debugger;" to where I suggested and you can look at the variables and values available.

 

Please PM your contact information (name, company, country, phone, email, and best time + timezone to reach you) so that either I, or a local OpenText Solutions Consultant or Support Engineer can assist you further.


Clement Wong
Principal Analytics Architect

OpenText Corporation
http://www.actuate.com | http://www.opentext.com






Also tagged with one or more of these keywords: highchart