Zkoss Framework JFree Chart - V [ Gantt ]

 Gantt 

Source :

1. File Zul :

1.1. gantt_chart.zull

<vlayout apply="org.zkoss.bind.BindComposer"

    viewModel="@id('vm') @init('demo.chart.gantt.GanttChartVM')">

    <chart id="chart" width="520" height="400" fgAlpha="255" paneColor="#ffffff"

        type="gantt"

        model="@bind(vm.model)" engine="@bind(vm.engine)"

        onClick="@command('showMessage',msg=event.areaComponent.tooltiptext)"/>

    <hlayout visible="@bind(not empty vm.message)">

        You clicked on :<label value="@bind(vm.message)"/>

    </hlayout>

</vlayout>




1.2. gantt_chart_ctrl.zull

<vlayout apply="org.zkoss.bind.BindComposer">

    <radiogroup

        onCheck="@global-command('configChanged', category=self.selectedItem.value)">

        <vlayout>

            <radio label="Both Series" value="both" selected="true" />

            <radio label="Scheduled" value="scheduled" />

            <radio label="Actual" value="actual" />

            <checkbox label="Percent Complete"

                onCheck="@global-command('configChanged', isComplete=self.checked)"/>

        </vlayout>

        <groupbox closable="false" sclass="z-demo-config">

            <caption label="Theme" />

            <hlayout>

                Choose :

                <listbox id="partSelect" mold="select"

                    onSelect="@global-command('configChanged', colorSet=self.selectedItem.value)">

                    <listitem label="Customize 1" value="1" selected="true"/>

                    <listitem label="Customize 2" value="2"/>

                    <listitem label="Customize 3" value="3"/>

                </listbox>

            </hlayout>

        </groupbox>

    </radiogroup>

</vlayout>




2. View Model :

2.1. ganttchartVM.java

package demo.chart.gantt;

 

import org.zkoss.bind.annotation.BindingParam;

import org.zkoss.bind.annotation.Command;

import org.zkoss.bind.annotation.GlobalCommand;

import org.zkoss.bind.annotation.Init;

import org.zkoss.bind.annotation.NotifyChange;

import org.zkoss.zul.GanttModel;

 

public class GanttChartVM {

 

    GanttModel model;

    GanttChartEngine engine;

    String message;

     

    String category;

    boolean complete;

 

    @Init

    public void init() {

        engine = new GanttChartEngine();

        model = ChartData.getModel(category = "both", complete = false);

    }

 

    public GanttChartEngine getEngine() {

        return engine;

    }

 

    public GanttModel getModel() {

        return model;

    }

     

    public String getMessage() {

        return message;

    }

 

    @Command("showMessage")

    @NotifyChange("message")

    public void onShowMessage(

            @BindingParam("msg") String message){

        this.message = message;

    }

     

    @GlobalCommand("configChanged")

    @NotifyChange({"model","engine"})

    public void onConfigChanged(

            @BindingParam("category") String category,

            @BindingParam("isComplete") Boolean complete,

            @BindingParam("colorSet") Integer colorSet){

        if(category!=null){

            this.category = category;

        }

        if(complete!=null){

            this.complete = complete;

        }

        if(category!=null || complete!=null){

            this.category = category==null?this.category:category;

            this.complete = complete==null?this.complete:complete;

            model = ChartData.getModel(this.category, this.complete);

        }

        if(colorSet!=null){

            engine.setColorSet(colorSet);

        }

    }

}




2.2. ganttchartengine.java

package demo.chart.gantt;

 

import java.awt.Color;

 

import org.jfree.chart.JFreeChart;

import org.jfree.chart.plot.CategoryPlot;

import org.jfree.chart.renderer.category.GanttRenderer;

import org.jfree.chart.renderer.category.GradientBarPainter;

import org.jfree.chart.renderer.category.StandardBarPainter;

import org.zkoss.zkex.zul.impl.JFreeChartEngine;

import org.zkoss.zul.Chart;

 

import demo.chart.ChartColors;

 

/*

 * you are able to do many advanced chart customization by extending ChartEngine

 */

public class GanttChartEngine extends JFreeChartEngine {

     

    public Color task1Color;

    public Color task2Color;

    public Color shadowColor;

    public Color completeColor;

    public Color incompleteColor;

    public boolean gradientBar = false;

     

    public GanttChartEngine(){

        setColorSet(1);

    }

 

    public boolean prepareJFreeChart(JFreeChart jfchart, Chart chart) {

        if (task1Color == null)

            return false;

        CategoryPlot plot = (CategoryPlot) jfchart.getPlot();

        GanttRenderer renderer = (GanttRenderer) plot.getRenderer();

        renderer.setBarPainter(gradientBar ? new GradientBarPainter() : new StandardBarPainter());

        renderer.setIncompletePaint(incompleteColor);

        renderer.setCompletePaint(completeColor);

        renderer.setShadowPaint(shadowColor);

        renderer.setSeriesPaint(0, task1Color);

        renderer.setSeriesPaint(1, task2Color);

        return false;

    }

 

    public void setColorSet(int value) {

        switch (value) {

        case 1:

            gradientBar = false;

            task1Color = new Color(0x083643);

            task2Color = new Color(0xB1E001);

            shadowColor = new Color(0x1D3C42);

            completeColor = new Color(0xCEF09D);

            incompleteColor = new Color(0x476C5E);

            break;

        case 2:

            gradientBar = false;

            task1Color = ChartColors.COLOR_2;

            task2Color = ChartColors.COLOR_3;

            shadowColor = ChartColors.COLOR_1;

            completeColor = ChartColors.COLOR_4;

            incompleteColor = ChartColors.COLOR_5;

            break;

        case 3:

            gradientBar = false;

            task1Color = new Color(0xADCF4F);

            task2Color = new Color(0xF2EC99);

            shadowColor = new Color(0x84815B);

            completeColor = new Color(0x4A1A2C);

            incompleteColor = new Color(0x8E3557);

            break;

        case 0:

        default: // Default Color

            task1Color = null;

        }

    }

 

}




3. Model :

3.1. ChartData.java

package demo.chart.gantt;

 

import java.util.Calendar;

import java.util.Date;

 

import org.zkoss.zul.GanttModel;

import org.zkoss.zul.GanttModel.GanttTask;

 

public class ChartData {

     

    public static GanttModel getModel(String category, boolean complete) {

        GanttModel ganttmodel = new GanttModel();

        int theYear = Calendar.getInstance().get(Calendar.YEAR);

        if ("both".equals(category) || "actual".equals(category)) {

            ganttmodel.addValue("Actual", new GanttTask("Write Proposal", date(theYear,4,1), date(theYear,4,3), complete ? 1.0 : 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Requirements Analysis", date(theYear,4,10), date(theYear,5,15), complete ? 1.0: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Design Phase", date(theYear,5,15), date(theYear,6,17), complete ? 1.0: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Alpha Implementation", date(theYear,7,1), date(theYear,9,12), complete ? 0.8: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Design Review", date(theYear,9,12), date(theYear,9,22), complete ? 1.0: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Revised Design Signoff", date(theYear,9,25), date(theYear,9,27), complete ? 1.0: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Beta Implementation", date(theYear,8,12), date(theYear,9,12), complete ? 0.9: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Testing", date(theYear,10,31), date(theYear,11,17), complete ? 0.8: 0.0));

            ganttmodel.addValue("Actual", new GanttTask("Final Implementation", date(theYear,11,18), date(theYear,12,5), complete ? 0.8: 0.0));

        }

         

        if ("both".equals(category) || "scheduled".equals(category)) {

            ganttmodel.addValue("Scheduled", new GanttTask("Write Proposal", date(theYear,4,1), date(theYear,4,5), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Requirements Analysis", date(theYear,4,10), date(theYear,5,5), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Design Phase", date(theYear,5,6), date(theYear,5,30), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Alpha Implementation", date(theYear,6,3), date(theYear,7,31), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Design Review", date(theYear,8,1), date(theYear,8,8), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Revised Design Signoff", date(theYear,8,10), date(theYear,8,10), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Beta Implementation", date(theYear,8,12), date(theYear,9,12), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Testing", date(theYear,9,13), date(theYear,10,31), 0.0));

            ganttmodel.addValue("Scheduled", new GanttTask("Final Implementation", date(theYear,11,1), date(theYear,11,15), 0.0));

        }

        return ganttmodel;

    }

     

    private static Date date(int year, int month, int day) {

        final Calendar calendar = Calendar.getInstance();

        calendar.set(year, month - 1, day);

        return calendar.getTime();

    }

}




3.2. ChartColor.java

Hasil :

Reference : https://www.zkoss.org/zkdemo/chart