JarCastingzkgooglecharts
ZK Wrapper for Google Charts visualizations.
Download
Maven
<dependency>
<groupId>org.zkoss</groupId>
<artifactId>zkgooglecharts</artifactId>
<version>0.3.0</version>
</dependency>
Gradle
runtime group: 'org.zkoss', name: 'zkgooglecharts', version: '0.3.0'
Demo
A small demo app is included to showcase functionality and use. To run the demo with Maven, start Jetty:
mvn jetty:run
and navigate to http://localhost:8080/zkgooglecharts/
Supported Charts
The following Google Charts are provided at this time:
org.zkoss.google.charts.PieChartorg.zkoss.google.charts.BarChartorg.zkoss.google.charts.ColumnChartorg.zkoss.google.charts.Timeline
More will be supported in future releases.
Quick Start
ZUL
Charts can be added to any ZK component and configured directly in ZUL. Data, however, must be initialized in Java.
<zk>
<zscript>
DataTable data = new DataTable();
data.addStringColumn("Task", "task");
data.addNumberColumn("Hours per Day", "hours");
data.addRow("Work", 11);
data.addRow("Eat", 2);
data.addRow("Commute", 2);
data.addRow("Watch TV", 2);
data.addRow("Sleep", new FormattedValue(7, "7.000"));
</zscript>
<piechart 3D="true" data="${data}"/>
</zk>
Java
The above can all be done directly in Java, of course.
DataTable data = new DataTable();
data.addStringColumn("Task", "task");
data.addNumberColumn("Hours per Day", "hours");
data.addRow("Work", 11);
data.addRow("Eat", 2);
data.addRow("Commute", 2);
data.addRow("Watch TV", 2);
data.addRow("Sleep", new FormattedValue(7, "7.000"));
PieChart chart = new PieChart();
chart.set3D(true);
chart.setData(data);
chart.setParent(window);
Chart Data
zkgooglecharts provides org.zkoss.google.charts.data.DataTable which aims to be functionally equivalent to Google Chart's google.visualization.DataTable class. All charts have a setData(DataTable data) function, though the expected/supported structure may be different for each.
A DataTable consists of columns and rows. Columns are typed, to assist Google Chart rendering, though not strictly in code.
Examples
Pie Chart Example
DataTable data = new DataTable();
data.addStringColumn("Task", "task");
data.addNumberColumn("Hours per Day", "hours");
data.addRow("Work", 11);
data.addRow("Eat", 2);
data.addRow("Commute", 2);
data.addRow("Watch TV", 2);
data.addRow("Sleep", new FormattedValue(7, "7.000"));
PieChart chart = new PieChart();
chart.setData(data);
Produces the pie chart example seen here.
Bar Chart Eaxmple
DataTable data = new DataTable();
data.addStringColumn("City");
data.addNumberColumn("2010 Population");
data.addRow("New York City, NY", 8175000);
data.addRow("Los Angeles, CA", 3792000);
data.addRow("Chicago, IL", 2695000);
data.addRow("Houston, TX", 2099000);
data.addRow("Philadelphia, PA", 1526000);
Map<String, Object> hAxis = new HashMap<>();
Map<String, Object> vAxis = new HashMap<>();
hAxis.put("title", "Total Population");
hAxis.put("minValue", 0);
vAxis.put("title", "City");
BarChart chart = new BarChart();
chart.setData(data);
chart.setTitle("Population of Largest U.S. Cities");
chart.setWidth(1000);
chart.setHeight(563);
chart.setOption("hAxis", hAxis);
chart.setOption("vAxis", vAxis);
Produces the bar chart example seen here.
Note that some options are supported directly, such as setTitle, but others are not and need to be specified explicitly using setOption. In the above example, to configure the horizontal and vertical axes, we use setOption.
Multiple data series can be displayed by adding more columns.
DataTable data = new DataTable();
data.addStringColumn("City");
data.addNumberColumn("2010 Population");
data.addNumberColumn("2000 Population");
data.addRow("New York City, NY", 8175000, 8008000);
data.addRow("Los Angeles, CA", 3792000, 3694000);
data.addRow("Chicago, IL", 2695000, 2896000);
data.addRow("Houston, TX", 2099000, 1953000);
data.addRow("Philadelphia, PA", 1526000, 1517000);
Map<String, Object> hAxis = new HashMap<>();
Map<String, Object> vAxis = new HashMap<>();
hAxis.put("title", "Total Population");
hAxis.put("minValue", 0);
vAxis.put("title", "City");
BarChart chart = new BarChart();
chart.setData(data);
chart.setTitle("Population of Largest U.S. Cities");
chart.setWidth(1000);
chart.setHeight(563);
chart.setOption("hAxis", hAxis);
chart.setOption("vAxis", vAxis);
Produces the 2nd bar chart example seen here (scroll example to right or left).
Timeline Example
The Timeline data structure differs from the Pie, Bar, or Column charts.
DataTable data = new DataTable();
data.addStringColumn("President");
data.addDateColumn("Start");
data.addDateColumn("End");
dataTable.addRow("Washington",
new GregorianCalendar(1789, 3, 29).getTime(),
new GregorianCalendar(1797, 2, 3).getTime()
);
dataTable.addRow("Adams",
new GregorianCalendar(1797, 2, 3).getTime(),
new GregorianCalendar(1801, 2, 3).getTime()
);
dataTable.addRow("Jefferson",
new GregorianCalendar(1801, 2, 3).getTime(),
new GregorianCalendar(1809, 2, 3).getTime()
);
Timeline chart = new Timeline();
chart.setData(data);
Produces the timeline example seen here.
License
zkgooglecharts and Google Charts are available under the Apache 2.0 License.
Credit
Google Charts is developed by Google.
zkgooglecharts is devolped by Sean Connolly.�