User avatar
dazz_x
Posts: 11
Joined: Fri Jun 25, 2010 9:49 am

Re: "Real" Server Side usage

I've just figured out where the batik errors comes from...

I have NaN values in the generated SVG

Code: Select all

<g class="highcharts-axis" ><path d="M NaN 310 L NaN 315" fill="none" stroke="#C0D0E0" stroke-width="1"/><text x="NaN" y="340" fill="#666" style="color:#666;font-size:11px;font-family:&apos;Lucida Grande&apos;, &apos;Lucida Sans Unicode&apos;, Verdana, Arial, Helvetica, sans-serif;" text-anchor="middle" transform="rotate(0 NaN 340)"><tspan style="font-weight:bold" x="NaN">aN/aN</tspan><tspan x="NaN" dy="16">aN:aN</tspan></text></g>
a bit weird, isn't it ? Maybe it will recall you something. That could be either a BBox or a font problem I think...
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: "Real" Server Side usage

I get some JavaScript errors when I try to run this. Where did you download your env.js? I tried something I found in an article by John Resig, but I suspect it is old and out of date. I see there are github repositories for complete projects. How do I set up this?
Torstein Hønsi
CTO, Founder
Highsoft
User avatar
dazz_x
Posts: 11
Joined: Fri Jun 25, 2010 9:49 am

Re: "Real" Server Side usage

There's the env.js web site
http://www.envjs.com/release/envjs-1.2
The docs are pretty cool

I have a root directory called envJSHighCharts which has this sructure

Code: Select all

envJSHighCharts
|-- highcharts.js
|-- libs
|   |-- date.js
|   |-- env.js
|   |-- exporting.src.js
|   |-- highcharts.src.js
|   |-- jquery.js
|   `-- js.jar
|-- base.html
with env.js-1.2 and js.jar 1.7-rc2,jquery 1.4.2, and highcharts latest (date.js is irrelevant here)
Don't forget to write width and height in chart options, or this will give you a chart of width=1 (pretty unreadable ;-) )

And then I call

Code: Select all

java -jar libs/js.jar -opt -1 highcharts.js 
in the root directory

Tell me if you have problems

cheers

dazz_x
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: "Real" Server Side usage

Sorry to bother you with this, but I still can't make it work. I have Rhino from env.js directly from the env.js website. It starts up, but complains it can't find my base.html file which is definately there. Could you zip up your entire folder, including rhino and env.js, test it and send it over to me? It would be really nice to get this working. The address is support at the highcharts domain.
Torstein Hønsi
CTO, Founder
Highsoft
mwolfetech
Posts: 6
Joined: Fri May 14, 2010 2:47 pm

Re: "Real" Server Side usage

I haven't played with env.js with highcharts in a while but are you doing a window.location="base.html"? IIRC, env.js also won't run scripts with type text/javascript by default, so you either need to change an option or change your base.html to include the javascripts with an text/envjs type .

e.g.:

Code: Select all

 <script src="highcharts.min.js" type="text/envjs"></script>
and running it for me was something along these lines:

Code: Select all

testjs $ js
Rhino 1.7 release 2 2009 03 22
js> Packages.org.mozilla.javascript.Context.getCurrentContext().setOptimizationLevel(-1);
js> load('/home/mwolfetech/opt/env-js/dist/env.rhino.js');
[  Envjs/1.6 (Rhino; U; Linux amd64 2.6.18-164.11.1.el5; en-US; rv:1.7.0.rc2) Re
sig/20070309 PilotFish/1.2.13  ]
js> window.location = 'test.html'
test.html
js> charting.init(); // a function to create the highchart--may not be needed if you do it on document load with jQuery
js> jQuery('#idofchartcontainer').html()  //See the results

You may want to check out the ruby JSpec gem though, it rolls a lot of this together to make JavaScript testing easier.
User avatar
dazz_x
Posts: 11
Joined: Fri Jun 25, 2010 9:49 am

Re: "Real" Server Side usage

don't know what version of env.js you use, but I've started a project from scratch at home and lead to a good result

I haven't build env.js myself but used the http://www.envjs.com/dist/env.rhino.1.2.js build

I send you a tar.gz of the directory which should work

cheers

dazz_x
polimux
Posts: 1
Joined: Fri Aug 20, 2010 8:55 am

Re: "Real" Server Side usage

Hi dazz_x,

i was able to recreate your steps, but I ran into the same NaN problem. Did you find a solution for that?

Thanks!
smida02
Posts: 46
Joined: Thu Aug 12, 2010 9:35 pm

Re: "Real" Server Side usage

using your example and lots of trial and error. I was able to get a full server side Java implementation working. I have it running inside of tomcat. This is cool because now I don't have to fork any processes to execute it. I have the Rhino jar file in the tomcat class path and load the following scripts:

String[] scripts = new String[4];
scripts[0] = "/env.rhino.js";
scripts[1] = "/jquery.min.js";
scripts[2] = "/highcharts.src.js";
scripts[3] = "/"+script+".js";
Shell.load(shell.getContext(), shell, scripts, null);
Object data = (Object) shell.get("svg", shell);
if (data != null) {
String string = Context.toString(data);
System.out.print("!!!!! data = "+string);
}

where 'script' is my client side rendering script with a few minor tweaks. I saved it into my _js directory. I added this to the bottom so I could get the results back out.

//////////////////////////
// GET EVERYTHING RUNNING
//////////////////////////
console.log('ready to go');
window.location = './base.html';
var chart = new Highcharts.Chart(options);
console.log($("#container").html());
//STORE THE INNER HTML IN A VARIABLE SO WE CAN GET AT IT
var svg;
svg = $("#container").html();
raymond
Posts: 2
Joined: Thu Sep 01, 2011 11:57 pm

Re: "Real" Server Side usage

I tried the above approach to generate a SVG file using highcharts, rhino and envjs.
However, the resulting SVG file that I got from

var svg;
svg = $("#container").html();

looked very different from the file I got if I call chart.exportChart() directly through a browser.

In fact, if I run the following javascript from rhino

load('env.rhino.js');
Element.prototype.getBBox = function(){
return {height:400,width:800}
}
load('jquery-1.3.2.min.js');
load('highcharts.src.js');
load('exporting.src.js');

window.location = "./base.html"

$(function(){
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
width:800,
height:400,
forExport:true
},
//other chart definition
});

var svg = chart.getSVG();
print(svg);
});

chart.getSVG() would be undefined.

Is there anything wrong with this configuration?
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: "Real" Server Side usage

Try to put this code:

Code: Select all

var svg = chart.getSVG();
print(svg);
in a Highcharts.chart callback function, I mean this:

Code: Select all

var chart = new Highcharts.Chart(options, function(chart){
  var svg = chart.getSVG();
  print(svg);
});
Slawek Kolodziej
Highcharts support team
raymond
Posts: 2
Joined: Thu Sep 01, 2011 11:57 pm

Re: "Real" Server Side usage

Here's what I have and chart.getSVG() is still undefined (base.html is basically <div id="container"></div>).
Any Idea? Thanks for your help.


===============================================================

load('env.rhino.js');
Element.prototype.getBBox = function(){
return {height:400,width:800}
}
load('jquery-1.3.2.min.js');
load('highcharts.src.js');
load('exporting.src.js');

window.location = "./base.html"

$(function(){
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
width:800,
height:400,
forExport:true
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23,
color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
}, function(chart){ var svg=chart.getSVG(); print(svg);} );
});
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: "Real" Server Side usage

Hi, sorry for late reply. Could you check whether chart is defined? Or try to use chart load event instead of callback function.
Slawek Kolodziej
Highcharts support team
nowhereMAN
Posts: 4
Joined: Fri Apr 06, 2012 1:19 pm

Re: "Real" Server Side usage

Hi,
I've spend few days trying to execute highcharts on server-side(Java), but coudn't.
I'm trying to use env.js+ rhino as well.
Highcharts are 2.2.1.
here is the code, I'm trying to use.

Code: Select all

package my.test;

import org.mozilla.javascript.Context;
import org.mozilla.javascript.ContextFactory;
import org.mozilla.javascript.Scriptable;
import org.mozilla.javascript.ScriptableObject;
import org.mozilla.javascript.tools.shell.Global;
import org.mozilla.javascript.tools.shell.Main;

public class HighchartsMain {

	private static Context cx;
	private static ScriptableObject scope;
	
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		String[] scripts = new String[4];
		scripts[0] = "env.rhino.js"; 
		scripts[1] = "jquery.js";
		scripts[2] = "prototype-adapter.js";
		scripts[2] = "highcharts.js";
		scripts[3] = "exporting.js"; 
		
		cx = ContextFactory.getGlobal().enterContext();
		cx.setOptimizationLevel(-1); 
		cx.setLanguageVersion(Context.VERSION_1_7); 
		Global global = Main.getGlobal(); 
		global.init(cx); 
		Scriptable scope = cx.initStandardObjects(global); 
		
		for (String script : scripts) {
			Main.processSource(cx, "D:\\test\\" + script); 
		}
		
		System.out.println("Loaded the script files");
		// Creating the script .
		String sd = "var dt = document.createElement('div');" 
				+ "document.body.appendChild(dt);" 
				+ "var dx = 40*8;"
				+ "Highcharts.setOptions({"
				+ " global: {"
				+	      " useUTC: false "
				+	   "}});"				
				+ "var chart = new Highcharts.Chart({" 
				+ 		"chart: {renderTo: dt, animation:false, wodth:800, height:400}," 
		        + "credits: {"
		        +    "enabled: false"
		        + "},"
/*				+ "exporting {enabled:false}," */
		        + "xAxis: { "
		        +    "categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
		        + "},"
		        
		        + "series: [{ "
		        +    "data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]"        
		        + 	"}]"
				+ "}"
				+ ", function(chart){var svg = chart.getSVG(); print(svg);}"		
				+ ");";

				
		Object result = cx.evaluateString(scope, sd, "Test", 1, null); 
		System.out.println(cx.toString(result));
		// Chart variable could not be found.
		String getRes = "chart.getSVG(); ";
		result  = cx.evaluateString(scope, getRes, "get", 1, null); 
		System.out.println(cx.toString(result));
		Object x = scope.get("chart", scope);

		// dx variable could be,
		Object y = scope.get("dx", scope);
		System.out.println(x);
	}

}
On executing that code, I'm getting JS error: uncaught JavaScript runtime exception: TypeError: Cannot set property "exportIcon" of undefined to "org.mozilla.javascript.InterpretedFunction@5b6df84b" (D:\Projects\one2team-highcharts-serverside-export-ca8afcf\src\my\test\exporting.js#669)

I did try to comment exportIcon initialisation, in exporting.js but got another problems.
Is there anyone who was successful on server side highcharts generation using 2.2.1 (actually there was one2team example that worked fine on 2.1.2 https://github.com/one2team/highcharts- ... ide-export but that example didn't work with 2.2.1 as well)
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: "Real" Server Side usage

Hi, sorry for late reply. Have you attached exporting module as well? Have you tried to ask one2team on github about support for the latest version? It's a third party software so it's better to ask the author.
Slawek Kolodziej
Highcharts support team
nowhereMAN
Posts: 4
Joined: Fri Apr 06, 2012 1:19 pm

Re: "Real" Server Side usage

hfrntt wrote:Hi, sorry for late reply. Have you attached exporting module as well? Have you tried to ask one2team on github about support for the latest version? It's a third party software so it's better to ask the author.
As for one2team solution, it seems that there is no much work with that project. So, I've tried to write my own module for highcharts.
the very basic solution, that didn't work,is posted above. there is an exporting.js attached, but the problem seems to be with highcharts initialization. I wonder if someone was able to do server side exporting with newer highcharts.

Return to “Highcharts Usage”