Hi everyone,
this weekend I tested VAADIN 7.beta1 and new javascript connectors. Now I 'd like to show how integrate highcharts.js in an easy way.
- Set up VAADIN 7 project with new experimental Eclipse Plugin with usage of a latest nighly build (or take this other
example
, sorry I cannot upload my files to the forum) - Download highchart.js from http://www.highcharts.com/ and put it in same directory where also following classes stay
- Put js_highchart.js in the same directory
- Take my code for the following classes and run the project…
Enjoy my easy “half a day” integration of highchart.js… 
ps… feel free to provide me your feedback what I can do in a better way
Best regards
Steffen
package com.example.javascriptdemo;
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({ "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "highcharts.js", "js_highchart.js"})
public class JsHighChart extends AbstractJavaScriptComponent
{
private static final long serialVersionUID = 1913474773889181118L;
public JsHighChart()
{
getState().data = data;
getState().title = "MyChart";
getState().units = "MyUnits";
}
@Override
public JsHighChartState getState()
{
return (JsHighChartState) super.getState();
}
String data = "Categories,Apples,Pears,Oranges,Bananas\n" +
"John,8,4,6,5\n" +
"Jane,3,4,2,3\n" +
"Joe,86,76,79,77\n" +
"Janet,3,16,13,15\n";
}
##java
package com.example.javascriptdemo;
import com.vaadin.shared.ui.JavaScriptComponentState;
public class JsHighChartState extends JavaScriptComponentState
{
private static final long serialVersionUID = -1016346299843904188L;
public String data;
public String title;
public String units;
}
##java
package com.example.javascriptdemo;
import com.vaadin.server.WrappedRequest;
import com.vaadin.ui.*;
public class JavascriptdemoUI extends UI {
private static final long serialVersionUID = 2169060678592185114L;
@Override
public void init(WrappedRequest request) {
JsHighChart chart = new JsHighChart();
chart.setId("myJSComponent");
addComponent(chart);
}
}
##javascript
com_example_javascriptdemo_JsHighChart = function()
{
var element = $(this.getElement());
// getData
var title = this.getState().title;
var data = this.getState().data;
var units = this.getState().units;
$(document).ready(readDataAndDraw())
this.onStateChange = function()
{
$(document).ready(readDataAndDraw())
}
function readDataAndDraw()
{
var id = document.getElementById("myJSComponent");
// double check if we really found the right div
if (id == null) return;
if(id.id != "myJSComponent") return;
var options = {
chart: {
renderTo: 'myJSComponent',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: title
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: units
}
},
series: []
};
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
}
};