QR NOTES : Tutorial Java Web ZK Framework - Form Charts

Java ZK Framework - Form Charts - Simple For Beginners

A. Design Form Charts (home.zul)

 <?page title="Main" contentType="text/html;charset=UTF-8"?>
<zk xmlns:h="native">
<window id="wndChart2" height="540px" width="100%" position="center" xmlns:w='client'  >                     
   <groupbox id="gbMenu" height="100%" width="100%" vflex="2" style="background-color:white">
           <grid id="grMenu" height="100%" width="100%" vflex="2">
               <columns>
                   <column width="40%" />
                   <column width="40%" />
                   <column width="40%" />
                   <column width="40%" />                   
               </columns>
               <rows>                                                    
                    <row style="background-color:#C8D5DB;">
                        <cell colspan="5" align="center">
                            <panel border="normal">
                              <caption iconSclass="z-icon-bar-chart-o" label="Address Customer"/>
                              <panelchildren style="padding-top:10px;">
                                    <div height="9px" />
                                     <div align="center" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.apps.chart.bar.BarChartVM')">
                                        <chart id="mybarchart" width="260" height="450"
                                            fgAlpha="255" paneColor="#ffffff" bgColor="#ffffff" type="bar"
                                            threeD="@bind(vm.threeD)" orient="@bind(vm.orient)"
                                            model="@bind(vm.model)" engine="@bind(vm.engine)"/>                                    
                                     </div>       
                              </panelchildren>
                            </panel>                            
                        </cell>
                    </row>                      
               </rows>
           </grid>                
   </groupbox>   
</window>      
</zk>

B. Code com.apps.chart.bar (.Java)

Code : ChartData.java

 package com.apps.chart.bar;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.SimpleCategoryModel;
import com.apps.db.DBSQLConnection;
 
public class ChartData {
    public static CategoryModel getModel(){
            try{            
                Connection Conn = new DBSQLConnection().openConnection();
                Statement st = Conn.createStatement();                
                ResultSet rs = st.executeQuery("SELECT address,COUNT(idcust) AS JML FROM CUSTOMER group by address");
                CategoryModel model = new SimpleCategoryModel();
                     while(rs.next()){
                         model.setValue("ADDRESS ", rs.getString("address"), rs.getInt("jml"));
                     }                       
                rs.close();
                st.close();        
                Conn.close();      
                return model;
        }catch(Exception e){
            Executions.getCurrent().sendRedirect("/","_self");
            System.out.println("Error chartdata : " + e.getMessage());
        }
            return null;        
    }
}

Code : ChartColors.java

 package com.apps.chart.bar;

import java.awt.Color;
import java.awt.GradientPaint;
import org.apache.commons.lang.StringUtils;

public class ChartColors {
    public static Color COLOR_1 = new Color(0x3E454C);
    public static Color COLOR_2 = new Color(0x2185C5);
    public static Color COLOR_3 = new Color(0x7ECEFD);
    static Color bckColor1 = Color.decode("#4282CE"); //Light blue
    static Color bckColor2 = Color.decode("#9BC1FF"); //Dark blue
    public static GradientPaint COLOR_0 = new GradientPaint(0,0,bckColor1,0,0,bckColor2);
    
    public static String toHtmlColor(Color color) {
        return "#" + toHexColor(color);
    }
public static String toHexColor(Color color) {
        return StringUtils.leftPad(Integer.toHexString(color.getRGB() & 0xFFFFFF), 6, '0');
    }
}

Code : BarChartVM.java

 package com.apps.chart.bar;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.CategoryModel;
 
public class BarChartVM {
 
    BarChartEngine engine;
    CategoryModel model;
    boolean threeD = false;
    String orient = "horizontal";
 
    @Init
    public void init() {
        engine = new BarChartEngine();
        model = ChartData.getModel();
    }
 
    public BarChartEngine getEngine() {
        return engine;
    }
 
    public CategoryModel getModel() {
        return model;
    }
 
    public String getOrient() {
        return orient;
    }
 
    public boolean isThreeD() {
        return threeD;
    }
     
    @GlobalCommand("configChanged")
    @NotifyChange({"threeD","orient"})
    public void onConfigChanged(
            @BindingParam("threeD") Boolean threeD,
            @BindingParam("orient") String orient){
        if(threeD != null){
            this.threeD = threeD;
        }
        if(orient != null){
            this.orient = orient;
        }
    }
}

Code : BarChartEngine.java

 package com.apps.chart.bar;

import java.awt.Font;
import java.text.NumberFormat;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.renderer.category.StandardBarPainter;
import org.jfree.chart.title.TextTitle;
import org.jfree.ui.HorizontalAlignment;
import org.jfree.ui.RectangleEdge;
import org.zkoss.zkex.zul.impl.JFreeChartEngine;
import org.zkoss.zul.Chart;

import com.apps.chart.bar.ChartColors;

public class BarChartEngine extends JFreeChartEngine {

    public boolean prepareJFreeChart(JFreeChart jfchart, Chart chart) {
        jfchart.setTitle(
                   new org.jfree.chart.title.TextTitle("Address Customer ",
                       new java.awt.Font("SansSerif", java.awt.Font.BOLD, 12)
                   )
                );       
        TextTitle source = new TextTitle("ADDRESS ");
        source.setFont(new Font("Arial", Font.PLAIN, 10));
        source.setPosition (RectangleEdge.TOP );
        source.setHorizontalAlignment(HorizontalAlignment.CENTER);
        jfchart.addSubtitle(source);       
       
        CategoryPlot plot = jfchart.getCategoryPlot();       
        BarRenderer renderer = (BarRenderer) plot.getRenderer();
        renderer.setBarPainter(new StandardBarPainter());
       
        renderer.setSeriesItemLabelGenerator(0,new StandardCategoryItemLabelGenerator("{2}",NumberFormat.getNumberInstance()));
        renderer.setSeriesItemLabelsVisible(0, true);
       
        Font font = new Font("Dialog", Font.PLAIN, 9);
        renderer.setSeriesItemLabelFont(0, font);
       
        ValueAxis rangeAxis = plot.getRangeAxis();
        rangeAxis.setUpperMargin(0.35);
        rangeAxis.setTickLabelFont(font);
        rangeAxis.setLabel("QTY");
       
        CategoryPlot plot2 = jfchart.getCategoryPlot();
        CategoryAxis rangeAxis2 = plot2.getDomainAxis();
        rangeAxis2.setTickLabelFont(font);
        rangeAxis2.setLabel("ADDRESS");
        
        jfchart.removeLegend();
        renderer.setSeriesPaint(0, ChartColors.COLOR_0);
        renderer.setSeriesPaint(1, ChartColors.COLOR_2);
        renderer.setSeriesPaint(2, ChartColors.COLOR_3);       
        return false;
    }
}