- \n
- Java JDK 8<\/li>\n
- Latest Eclipse Mars<\/li>\n
- Vaadin plugin for eclipse<\/li>\n
- Vaadin charts<\/li>\n<\/ul>\n
2. Introduction<\/h2>\n
Vaadin charts offer more than twenty kinds of charts. You can find for sure a chart to fill your needs in data presentation UI, the charts are very easy to use and use html5 and there is no need to install any plug-ins and you can use it directly from Java. In this example I am going to show how to configure the Vaadin Charts in eclipse using Ivy and make four charts of different kinds.<\/p>\n
3. Prerequisites<\/h2>\n
- \n
- JDK installed<\/li>\n
- Eclipse Mars installed and working<\/li>\n
- Vaadin plugin installed and working<\/li>\n<\/ul>\n
4. Set up the project<\/h2>\n
In the file menu choose File -> New -> Other<\/p>\n
![\"01](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\")
<\/a>01 New Project<\/figcaption><\/figure><\/p>\n Now from the list choose Vaadin 7 project:<\/p>\n
![\"02](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\")
<\/a>02 Vaadin Project<\/figcaption><\/figure><\/p>\n Hit next and name your project then hit finish.<\/p>\n
5. Set up Vaadin Charts<\/h2>\n
5.1 The license<\/h3>\n
Go to the Vaadin website and sing up to get an evaluation license
vaadin.charts.developer.license<\/code> of Vaadin Charts<\/a>, download the license and put it in your home directory. If you are in Windows, you home directory is onC:\\Users\\Username<\/code>, on Linux and OSX your home directory is~\/<\/code>. Just put the license there and you are fine.<\/p>\n5.2 The repositories<\/h3>\n
Now to get the Vaadin charts jar, you need to get the jar from the Maven repository,here I am using Ivy for that task so edit the file
ivy.xml<\/code> in the root of your project and add the following node into the dependencies node.<\/p>\nVaadin Charts dependency<\/em><\/span><\/p>\n
\t\t<dependency\n\t\t org=\"com.vaadin.addon\"\n\t\t name=\"vaadin-charts\"\n\t\t rev=\"3.0.0-beta1\" \/>\n<\/pre>\n
Now the
ivy.xml<\/code> should look like this:<\/p>\nivy.xml<\/em><\/span><\/p>\n
<?xml version=\"1.0\"?>\n<!DOCTYPE ivy-module [\n\t<!ENTITY vaadin.version \"7.6.3\">\n]>\n<ivy-module version=\"2.0\"\n\txmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n\txsi:noNamespaceSchemaLocation=\"http:\/\/ant.apache.org\/ivy\/schemas\/ivy.xsd\">\n\t<info organisation=\"com.example\" module=\"v7proj\" \/>\n\t<configurations>\n\t\t<!-- The default configuration, which should be deployed to the server -->\n\t\t<conf name=\"default\" \/>\n\t\t<!-- A configuration only needed when compiling the widget set. Should \n\t\t\tnot be deployed to the server -->\n\t\t<conf name=\"widgetset-compile\" \/>\n\t\t<!-- A configuration used in compilation of server side classes only.\n\t\t\tShould be deployed to the server -->\n\t\t<conf name=\"nodeploy\" \/>\n\t<\/configurations>\n\t<dependencies defaultconf=\"default\" defaultconfmapping=\"default->default\">\n\t\t<!-- The core server part of Vaadin -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-server\" rev=\"&vaadin.version;\" \/>\n\n\t\t<!-- Vaadin themes -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-themes\" rev=\"&vaadin.version;\" \/>\n\n\t\t<!-- Push support -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-push\" rev=\"&vaadin.version;\" \/>\n\n\t\t<!-- Servlet 3.0 API -->\n\t\t<dependency org=\"javax.servlet\" name=\"javax.servlet-api\" rev=\"3.0.1\" conf=\"nodeploy->default\" \/>\n\n\t\t<!-- Precompiled DefaultWidgetSet -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-client-compiled\"\n\t\t\trev=\"&vaadin.version;\" \/>\n\n\t\t<!-- Vaadin client side, needed for widget set compilation -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-client\" rev=\"&vaadin.version;\"\n\t\t\t conf=\"widgetset-compile->default\" \/>\n\n\t\t<!-- Compiler for custom widget sets. Should not be deployed -->\n\t\t<dependency org=\"com.vaadin\" name=\"vaadin-client-compiler\"\n\t\t\trev=\"&vaadin.version;\" conf=\"widgetset-compile->default\" \/>\n\n\t\t<dependency\n\t\t org=\"com.vaadin.addon\"\n\t\t name=\"vaadin-charts\"\n\t\t rev=\"3.0.0-beta1\" \/>\n\t\t\n\t<\/dependencies>\n<\/ivy-module>\n<\/pre>\n
6. Compile Widgetset<\/h2>\n
After you add the dependency, you need to compile the Vaadin widgetset in order to use the Vaadin charts, go to the Vaadin Menu in the eclipse toolbar and choose compile widgetset.<\/p>\n
![\"03](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/03-Compile-Widgetset.png\")
<\/a>03 Compile Widgetset<\/figcaption><\/figure><\/p>\n If everything is okay you should get something like this in the tail of the eclipse console output:<\/p>\n
output console tail<\/em><\/span><\/p>\n
Compile of permutations succeeded\n Compilation succeeded -- 115,650s\nLinking into \n Link succeeded\n Linking succeeded -- 0,973s\n<\/pre>\n
7. Coding the example<\/h2>\n
7.1 Init Method<\/h3>\n
Init Method<\/em><\/span><\/p>\n
\tprotected void init(VaadinRequest request) {\n\t\t final VerticalLayout layout = new VerticalLayout();\n\t\t layout.setMargin(true);\n\t\t setContent(layout);\n\t\t \n\t\t HorizontalLayout line01 = new HorizontalLayout();\n\t\t HorizontalLayout line02 = new HorizontalLayout();\n\t\t \n\t\t line01.addComponent(getLineChart());\n\t\t line01.addComponent(getWaterfallChart());\n\t\t line02.addComponent(getPieChart());\n\t\t line02.addComponent(getFunnelChart());\n\t\t layout.addComponent(line01);\n\t\t layout.addComponent(line02);\n\t}\n<\/pre>\nFor the main view I created a vertical layout an inside the vertical layout I put two horizontal layouts to the four examples on a single page, every chart is inside a method for clarity.<\/p>\n
7.2 Line Chart<\/h3>\n
Line chart is a two dimensional chart that you can use to on a multiple scenarios.<\/p>\n
![\"04](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/04-Line-Chart.png\")
<\/a>04 Line Chart<\/figcaption><\/figure><\/p>\n First I create the chart and assign a fixed size of 300×300 pixels.<\/p>\n
Create chart<\/em><\/span><\/p>\n
\t Chart chart = new Chart();\n\t chart.setWidth(\"300px\");\n\t chart.setHeight(\"300px\");\n<\/pre>\n
Create a configuration Object to set the type of chart and the title.
<\/div> <\/div><\/p>\nConfiguration<\/em><\/span><\/p>\n
\t Configuration conf = chart.getConfiguration();\n\t conf.getChart().setType(ChartType.LINE);\n\t conf.setTitle(\"Line Chart\");\n<\/pre>\n
Create the data to be show in the chart using a DataSeries object for that and then add the dataseries to the configuration of the chart.<\/p>\n
Dataseries<\/em><\/span><\/p>\n
\t DataSeries serie1 = new DataSeries(\"SERIE 1\");\n\t serie1.add(new DataSeriesItem(0,0));\n\t serie1.add(new DataSeriesItem(1,1));\n\t serie1.add(new DataSeriesItem(2,2));\n\t serie1.add(new DataSeriesItem(3,3));\n\t serie1.add(new DataSeriesItem(4,4));\n\t conf.addSeries(serie1);\n\n\t DataSeries serie2 = new DataSeries(\"SERIE 2\");\n\t serie2.add(new DataSeriesItem(0,2));\n\t serie2.add(new DataSeriesItem(1,2));\n\t serie2.add(new DataSeriesItem(2,3));\n\t serie2.add(new DataSeriesItem(3,4));\n\t serie2.add(new DataSeriesItem(4,5));\n\t conf.addSeries(serie2);\n<\/pre>\n
With the PlotOptionsLine, I set the color of each line.<\/p>\n
PlotOptionsLine<\/em><\/span><\/p>\n
\t PlotOptionsLine serie1Opts = new PlotOptionsLine();\n\t serie1Opts.setColor(SolidColor.BLUE);\n\t serie1.setPlotOptions(serie1Opts);\n\n\t PlotOptionsLine serie2Opts = new PlotOptionsLine();\n\t serie2Opts.setColor(SolidColor.RED);\n\t serie2.setPlotOptions(serie2Opts);\n<\/pre>\n
Here is the
getLineChart()<\/code> method.<\/p>\nLine Chart<\/em><\/span><\/p>\n
private Chart getLineChart()\n{\n\t Chart chart = new Chart();\n\t chart.setWidth(\"300px\");\n\t chart.setHeight(\"300px\");\n\t Configuration conf = chart.getConfiguration();\n\t conf.getChart().setType(ChartType.LINE);\n\t conf.setTitle(\"Line Chart\");\n\n\t DataSeries serie1 = new DataSeries(\"SERIE 1\");\n\t serie1.add(new DataSeriesItem(0,0));\n\t serie1.add(new DataSeriesItem(1,1));\n\t serie1.add(new DataSeriesItem(2,2));\n\t serie1.add(new DataSeriesItem(3,3));\n\t serie1.add(new DataSeriesItem(4,4));\n\t conf.addSeries(serie1);\n\t PlotOptionsLine serie1Opts = new PlotOptionsLine();\n\t serie1Opts.setColor(SolidColor.BLUE);\n\t serie1.setPlotOptions(serie1Opts);\n\n\t DataSeries serie2 = new DataSeries(\"SERIE 2\");\n\t serie2.add(new DataSeriesItem(0,2));\n\t serie2.add(new DataSeriesItem(1,2));\n\t serie2.add(new DataSeriesItem(2,3));\n\t serie2.add(new DataSeriesItem(3,4));\n\t serie2.add(new DataSeriesItem(4,5));\n\t conf.addSeries(serie2);\n\t PlotOptionsLine serie2Opts = new PlotOptionsLine();\n\t serie2Opts.setColor(SolidColor.RED);\n\t serie2.setPlotOptions(serie2Opts);\n\t \n\t return chart;\n}\n<\/pre>\n7.3 WaterFall Chart<\/h3>\n
The waterfall chart help to understand the cumulative effects of positive and negatives values.<\/p>\n
![\"05](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/05-Waterfall-Chart.png\")
<\/a>05 Waterfall Chart<\/figcaption><\/figure><\/p>\n Create the chart and assign a fixed size of 300×300 pixels.<\/p>\n
Create Chart<\/em><\/span><\/p>\n
\tChart chart = new Chart(ChartType.WATERFALL);\n\tchart.setWidth(\"300px\");\n\tchart.setHeight(\"300px\");\n<\/pre>\n
Create a Configuration object, set the title and get rid of the legend.<\/p>\n
Configuration<\/em><\/span><\/p>\n
\tConfiguration conf = chart.getConfiguration();\n\tconf.setTitle(\"Waterfall Chart\");\n\tconf.getLegend().setEnabled(false);\n<\/pre>\n
Define the x axis of the chart and set the categories.<\/p>\n
Xaxis<\/em><\/span><\/p>\n
\tXAxis xaxis = new XAxis();\n\txaxis.setCategories(\"Initial value\", \"+90\", \"-70\" , \"Total\");\n\tconf.addxAxis(xaxis);\n<\/pre>\n
Define a y axis and set the title of the y axis.<\/p>\n
Yaxis<\/em><\/span><\/p>\n
\tYAxis yaxis = new YAxis();\n\tyaxis.setTitle(\"Accumulator\");\n\tconf.addyAxis(yaxis);\n<\/pre>\n
Define the colors, green to positive values and red to negative values.<\/p>\n
Colors<\/em><\/span><\/p>\n
\tfinal Color negative = SolidColor.RED;\n\tfinal Color positive = SolidColor.GREEN;\n<\/pre>\n
Create the data of the chart and add it to the configuration.<\/p>\n
Data<\/em><\/span><\/p>\n
\tDataSeries series = new DataSeries();\n\tDataSeriesItem start = new DataSeriesItem(\"Start\", 100);\n\tstart.setColor(positive);\n\tseries.add(start);\n\tDataSeriesItem a90 = new DataSeriesItem(\"+90\", +90);\n\ta90.setColor(positive);\n\tseries.add(a90);\n\tDataSeriesItem m70 = new DataSeriesItem(\"-70\", -70);\n\tm70.setColor(negative);\n\tseries.add(m70);\n\n\tWaterFallSum end = new WaterFallSum(\"Total\");\n\tend.setColor(positive);\n\tend.setIntermediate(false);\n\tseries.add(end);\n\tconf.addSeries(series);\t\n<\/pre>\n
The waterfall chart method.<\/p>\n
Waterfall Chart<\/em><\/span><\/p>\n
private Chart getWaterfallChart()\n{\n\tChart chart = new Chart(ChartType.WATERFALL);\n\tchart.setWidth(\"300px\");\n\tchart.setHeight(\"300px\");\n\n\tConfiguration conf = chart.getConfiguration();\n\tconf.setTitle(\"Waterfall Chart\");\n\tconf.getLegend().setEnabled(false);\n\n\tXAxis xaxis = new XAxis();\n\txaxis.setCategories(\"Initial value\", \"+90\", \"-70\" , \"Total\");\n\tconf.addxAxis(xaxis);\n\n\tYAxis yaxis = new YAxis();\n\tyaxis.setTitle(\"Accumulator\");\n\tconf.addyAxis(yaxis);\n\n\tfinal Color negative = SolidColor.RED;\n\tfinal Color positive = SolidColor.GREEN;\n\n\tDataSeries series = new DataSeries();\n\n\tDataSeriesItem start = new DataSeriesItem(\"Start\", 100);\n\tstart.setColor(positive);\n\tseries.add(start);\n\t\n\tDataSeriesItem a90 = new DataSeriesItem(\"+90\", +90);\n\ta90.setColor(positive);\n\tseries.add(a90);\n\t\n\tDataSeriesItem m70 = new DataSeriesItem(\"-70\", -70);\n\tm70.setColor(negative);\n\tseries.add(m70);\n\n\tWaterFallSum end = new WaterFallSum(\"Total\");\n\tend.setColor(positive);\n\tend.setIntermediate(false);\n\tseries.add(end);\n\n\tconf.addSeries(series);\t\t\n\treturn chart;\n}\n<\/pre>\n7.4 Pie Chart<\/h3>\n
A pie chart is used to view and compare numerical proportions.<\/p>\n
![\"06](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/03\/06-Pie-Chart.png\")
<\/a>06 Pie Chart<\/figcaption><\/figure><\/p>\n Create the chart and set its size.<\/p>\n
Create chart<\/em><\/span><\/p>\n
\tChart chart = new Chart(ChartType.PIE);\n\tchart.setWidth(\"300px\");\n\tchart.setHeight(\"300px\");\t\t\n<\/pre>\n
Create the configuration.<\/p>\n
Configuration<\/em><\/span><\/p>\n
\tConfiguration conf = chart.getConfiguration();\n\tconf.setTitle(\"Pie Chart\");\n<\/pre>\n
Create the plot options, the size, the center and the inner size.<\/p>\n
Plot options<\/em><\/span><\/p>\n
\tPlotOptionsPie options = new PlotOptionsPie();\n\toptions.setInnerSize(\"50px\");\n\toptions.setSize(\"75%\");\n\toptions.setCenter(\"50%\", \"50%\");\n\tconf.setPlotOptions(options);\n<\/pre>\n
Create the data, one of 35%, one of 40% and one of 25% sliced to call the attention of the viewer.[ulp id=’YBvYYzEYBUrADqmI’]<\/p>\n
Data<\/em><\/span><\/p>\n
\tDataSeries series = new DataSeries();\n\tseries.add(new DataSeriesItem(\"35%\", 35));\n\tseries.add(new DataSeriesItem(\"40%\", 40));\n\tDataSeriesItem s25 = new DataSeriesItem(\"25%\", 25);\n\ts25.setSliced(true);\n\tseries.add(s25);\n\tconf.addSeries(series);\t\t\n<\/pre>\n
The Pie chart method.<\/p>\n