[CLOSED] Storing Custom Created High chart as an image

May 11, 2018, 02:50 PM

Hello,

We are needing to create custom chart which is not available in WebFOCUS. I have used High charts to create that chart.It's working fine in browser. I am also needing to export this chart with other WebFOCUS created tabular report. Highcharts Export functionality just downloading chart into browser. I want to store this chart as an image in WebFOCUS Server So, that i can refer that image while creating PDF report. is there any options available to achieve this? . I tried using EDAPUT but its not seems to be working.

Sample code

 -HTMLFORM BEGIN
<HTML>
<HEAD>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
-*<script src="https://code.highcharts.com/modules/exporting.js"></script>
<BODY>
<div id="container" style="height: 300px; min-width: 200px; max-width: 400px; margin: 0 auto"></div>

<SCRIPT>
Highcharts.chart('container', {

chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },

credits: {
        enabled: false
},

title: {
        text: 'Asset Allocation'
 },

xAxis: [{ categories: ['Value', 'Blend', 'Growth'],title : {text:'Valuation'},lineWidth: 0,tickWidth: 0,},
		{visiblility:false,labels:{enabled:false},title : {text:null},lineWidth: 0,tickWidth: 0,}
],

yAxis: [{ categories: ['Small', 'Medium', 'Large'],title : {text:'Market Cap'}},
		{visiblility:false,labels:{enabled:false},title : {text:null}}
],

-* plotOptions: {  bubble:{maxSize:'30%'} },

colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
},

    legend: {
        align: 'right',
        layout: 'horizontal',
        margin: 0,
        verticalAlign: 'bottom',
        y: 500,
        symbolHeight: 280
    },

tooltip: {
        	formatter: function () {
						if(this.series.name == 'heat') {
            							return '[b]' + this.series.yAxis.categories[this.point.y] + ''+
                 						this.series.xAxis.categories[this.point.x] +  this.point.value + '%'+'[/b]';
					} else {
										return false;
					}
        }
  },


series: [
		{   type: 'heatmap',
        	borderWidth: 1,
			yAxis: 0,
			xAxis:0,
			name:'heat',
        	data: [[0,0,25],[0,1,58],[0,2,12],[1,0,19],[1,1,95],[1,2,23],[2,0,8],[2,1,62],[2,2,64]],
        	dataLabels: {
            			enabled: true,
            			color: '#000000',
						formatter: function() {
       								return this.point.value+"%";
   					        }
       	              }
    	},
{
        type: 'bubble',
		yAxis: 1,
		xAxis:1,
		color:'#7BAFD4',
		name:'bubble',
       	data: [[.2, 0, 25]],
		dataLabels: {enabled: false},
		showInLegend: false,
}
		]

});
</SCRIPT>

</BODY>

</HTML>

-HTMLFORM END

This message has been edited. Last edited by: FP Mod Chuck,

May 15, 2018, 10:55 AM

FP Mod Chuck

Surenther

I attempted to run your example and all I got was a blank page. If this is still a question for you I suggest you open a case with techsupport and get their advice on how to maybe achieve what you want.

May 15, 2018, 11:17 AM

Francis Mariani

I have no trouble running your code - I see the Highcharts chart.

I added

<script src="https://code.highcharts.com/modules/exporting.js"></script>

which provides the hamburger menu to download a version of the chart in image or PDF format.

I am not up-to-date on built-in WebFOCUS functionality to include an image version of a Highcharts chart.

Highcharts does offer offline exporting via

<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>

though I don't know how easy this is to incorporate into a WebFOCUS program. Documentation: Client side export.

Have you tried the GUI tools to do this with a normal Highcharts chart that is available in WebFOCUS?

I am willing to be paid to look into this

This message has been edited. Last edited by: Francis Mariani,

May 17, 2018, 10:54 AM

Surenther

quote:
Originally posted by Francis Mariani:
I have no trouble running your code - I see the Highcharts chart.

I added
<script src="https://code.highcharts.com/modules/exporting.js"></script>
which provides the hamburger menu to download a version of the chart in image or PDF format.

I am not up-to-date on built-in WebFOCUS functionality to include an image version of a Highcharts chart.

Highcharts does offer offline exporting via
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
though I don't know how easy this is to incorporate into a WebFOCUS program. Documentation: Client side export.

Have you tried the GUI tools to do this with a normal Highcharts chart that is available in WebFOCUS?

I am willing to be paid to look into this

Thanks a for the info. Yes, i have already looked into offline exporting but as you mentioned i didn't able to find solution to integrate with WebFOCUS. I have also looked into WebFOCUS GUI not able to create exact chart like this.