Using ZK Charts allows you to create charts based on your own data in a much efficient way than before. In this blog, we will show you how you can paint the time plot chart using ZK Charts instead of the SIMILE Timeplot Component.
Installation
ZK Charts version: 1.2.0+
If you are not familiar with ZK Charts component, please take a look at Getting Started with ZK Charts
Demo
Data Preparation
In this demo, we will use the same data as the example of SIMILE timeplot, which contains New Legal Permanent Residents in the U.S. (per year) vs. U.S. History. We declare the data into two two-dimension arrays for data(Residents) and events(History) in a TimeplotData class as the following:
public class TimeplotData {
private static final Object[][] events = {
{getDate(1849, 1, 1), "California Gold Rush"},
// omitted
{getDate(2001, 9, 11), "Attack at the World Trade Center"}
};
private static final Double[][] data = {
{getDate(1820, 1, 1), 8385d},
// omitted
{getDate(2006, 1, 1), 1266264d}};
static Double[][] getData() {
return data;
}
static Object[][] getEvents() {
return events;
}
static Double getDate(int year, int month, int date) {
Calendar cal = Calendar.getInstance();
cal.setTimeZone(TimeZone.getTimeZone("UTC"));
cal.set(year, month, date);
return (double) cal.getTimeInMillis();
}
}
Declare ZK Composer
Declaring this TimeplotComposer class normally as you would using any other ZK components, we then put the styling code of the chart into the doAfterCompose() method and initiate the chart into the doZoomOut() method as follows:
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
// set the xAxis type to support datetime format
XAxis xAxis = chart.getXAxis();
xAxis.setType("datetime");
// styling the chart layout
YAxis yAxis = chart.getYAxis();
yAxis.setTitle("Value");
yAxis.setMin(0);
yAxis.setGridLineWidth(0);
yAxis.setLineWidth(1);
// specify the simple tooltip for the point format
chart.getTooltip().setPointFormat("{point.x:%e. %b}: {point.y}");
// disable the legend in this chart
chart.getLegend().setEnabled(false);
// paint the time plot chart by using
// the same zoom out API (the default zoom value is 1)
doZoomOut();
}
Register the two events – onSelection for ZK Charts and onClick for ZK Button, the onSelection event in this demo demonstrates the zooming functionality of ZK Charts, and the other is to reset the zooming to scale.
For example,
@Listen("onSelection = #chart")
public void doSelection(ChartsSelectionEvent event) {
// doing the zooming in function
double min = event.getXAxisMin().longValue();
double max = event.getXAxisMax().longValue();
updateSelection(min, max);
// enable the zooming out button
btn.setVisible(true);
}
@Listen("onClick = #btn")
public void doZoomOut() {
Double[][] data = TimeplotData.getData();
updateSelection(data[0][0], data[data.length-1][0]);
btn.setVisible(false);
}
And then we paint the data on the timeplot chart within updateSelection() method, which depends on the selection range, if any.
private void updateSelection(double min, double max) {
// reset
XAxis xAxis = chart.getXAxis();
if (xAxis.getPlotBands() != null) {
for (PlotBand pb : new ArrayList<PlotBand>
(xAxis.getPlotBands())) {
xAxis.removePlotBand(pb);
}
}
if (xAxis.getPlotLines() != null) {
for (PlotLine pl : new ArrayList<PlotLine>
(xAxis.getPlotLines())) {
xAxis.removePlotLine(pl);
}
}
Series series1 = chart.getSeries();
// styling the color of the point
AreaPlotOptions area = chart.getPlotOptions().getArea();
area.setLineColor("rgba(0,139,182,1)");
Marker marker = chart.getPlotOptions().getArea().getMarker();
marker.setRadius(2);
// styling the color of the series
LinearGradient seriesColor = new LinearGradient(1, 0, 1, 1);
seriesColor.addStop(0, "rgba(0,139,182,1)");
seriesColor.addStop(1, "rgba(255,255,255,0.5)");
series1.setColor(seriesColor);
// styling the color of the plotband
LinearGradient plotbandColor = new LinearGradient(1, 1, 1, 0);
plotbandColor.addStop(0, "#008bb6");
plotbandColor.addStop(1, "#ffffff");
series1.setType("area");
List<Point> data = series1.getData();
if (data != null)
data.clear();
// fill in the data of New Legal Permanent Residents in the U.S
for (Double[] val : TimeplotData.getData()) {
if (min < val[0] && max > val[0]) {
Point point = new Point(val[0], val[1]);
point.setColor("blank");
series1.addPoint(point);
}
}
// fill in the data of the U.S. History
for (Object[] val : TimeplotData.getEvents()) {
if (val.length == 2) {
// without the end date, we use PlotLine to display
if (min < (Double) val[0] && max > (Double) val[0]) {
PlotLine line = new PlotLine();
final String title = (String) val[1];
line.setValue((Number) val[0]);
line.setWidth(3);
line.setColor("rgba(0,139,182,0.5)");
line.addEventListener("onMouseOver",
new EventListener<MouseEvent>() {
public void onEvent(MouseEvent event)
throws Exception {
Clients.showNotification(title, "info",
event.getTarget(),
event.getPageX() == 0 ?
event.getX() : event.getPageX(),
event.getPageY() == 0 ?
event.getY() : event.getPageY()
, 1500, false);
}
});
xAxis.addPlotLine(line);
}
} else {
double v0 = (Double) val[0];
double v1 = (Double) val[1];
if (v0 < min && v1 < max)
v0 = min;
if (v0 > min && v1 > max)
v1 = max;
if (v0 < min && v1 > max) {
v0 = min;
v1 = max;
}
// with the end date, we use PlotBand to display
if (min <= v1 && max >= v1) {
final PlotBand band = new PlotBand();
band.setFrom((Number) val[0]);
band.setTo((Number) val[1]);
band.setColor(plotbandColor);
final String title = (String) val[2];
band.addEventListener("onMouseOver",
new EventListener<MouseEvent>() {
public void onEvent(MouseEvent event)
throws Exception {
Clients.showNotification(title, "info",
event.getTarget(),
event.getPageX() == 0 ?
event.getX() : event.getPageX(),
event.getPageY() == 0 ?
event.getY() : event.getPageY(),
1500, false);
}
});
xAxis.addPlotBand(band);
}
}
}
}
As you can see from the above, we used PlotBand (a rectangular area in the graph) and PlotLine to represent the events (U.S. History) on the chart.
We provide a notification.js to overwrite the default ZK notification tooltip behavior in order to center the tooltip when mouse hovering the event bar (timeline). We also provide a button the in the chart to reset the zooming.
