Zkoss Framework JFree Chart - VI [ Line ]

 Line 

Source :

1. File Zul :

1.1. line_chart.zull

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

    viewModel="@id('vm') @init('demo.chart.line.LineChartVM')">

    <chart id="chart" title="Half-Year Report" width="520" height="350" paneColor="#FFFFFF"

        type="line" yAxis="Amount"

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

        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. line_chart_ctrl.zull

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

    viewModel="@id('vm') @init('demo.chart.line.LineChartConfigVM')">

    <checkbox label="Toggle 3D Chart"

        checked="@bind(vm.threeD)"

        onCheck="@global-command('configChanged',threeD=vm.threeD,showLine=vm.showLine,showShape=vm.showShape)"/>

    <checkbox label="Show Line Shape"

        checked="@bind(vm.showShape)" visible="@bind(not vm.threeD)"

        onCheck="@global-command('configChanged',showShape=vm.showShape)"/>     

    <checkbox label="Show Lines (Actual, Establishment)"

        checked="@bind(vm.showLine)" visible="@bind(not vm.threeD)"

        onCheck="@global-command('configChanged',showLine=vm.showLine)"/>

    <vlayout spacing="5px" visible="@bind(not vm.threeD)" >

        Line Width :

        <spinner constraint="no negative,no zero,no empty,min 1, max 10" width="100px" instant="true"

            value="@bind(vm.width)"

            onChange="@global-command('configChanged',width=vm.width)"/>

    </vlayout>

</vlayout>




2. View Model :

2.1. linechartVM.java

package demo.chart.line;

 

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.CategoryModel;

 

public class LineChartVM {

 

    CategoryModel model;

    LineChartEngine engine;

    String message;

     

    boolean threeD;

 

    @Init

    public void init() {

        engine = new LineChartEngine();

        model = ChartData.getModel();

    }

 

    public LineChartEngine getEngine() {

        return engine;

    }

 

    public CategoryModel getModel() {

        return model;

    }

     

    public String getMessage() {

        return message;

    }

 

    public boolean isThreeD() {

        return threeD;

    }

 

    @Command("showMessage")

    @NotifyChange("message")

    public void onShowMessage(

            @BindingParam("msg") String message){

        this.message = message;

    }

     

    @GlobalCommand("configChanged")

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

    public void onConfigChanged(

            @BindingParam("threeD") Boolean threeD,

            @BindingParam("showLine") Boolean showLine,

            @BindingParam("showShape") Boolean showShape,

            @BindingParam("width") Integer width){

        if (threeD != null) {

            this.threeD = threeD;

        }

 

        if (showLine != null) {

            engine.setShowLine(showLine);

        }

 

        if (showShape != null) {

            engine.setShowShape(showShape);

        }

 

        if (width != null) {

            engine.setWidth(width);

        }

    }

}




2.2. linechartconfigVN.java

package demo.chart.line;

 

public class LineChartConfigVM {

 

    boolean threeD = false;

    boolean showLine = true;

    boolean showShape = true;

    int width = 2;

 

    public boolean isThreeD() {

        return threeD;

    }

 

    public void setThreeD(boolean threeD) {

        this.threeD = threeD;

    }

 

    public int getWidth() {

        return width;

    }

 

    public void setWidth(int width) {

        this.width = width;

    }

 

    public boolean isShowLine() {

        return showLine;

    }

 

    public void setShowLine(boolean showLine) {

        this.showLine = showLine;

    }

 

    public boolean isShowShape() {

        return showShape;

    }

 

    public void setShowShape(boolean showShape) {

        this.showShape = showShape;

    }

 

}




2.3. linechartengine.java

package demo.chart.line;

 

import java.awt.BasicStroke;

 

import org.jfree.chart.JFreeChart;

import org.jfree.chart.plot.CategoryPlot;

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

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 LineChartEngine extends JFreeChartEngine {

 

    public int width = 2;

    public boolean showLine = true;

    public boolean showShape = true;

 

    public boolean prepareJFreeChart(JFreeChart jfchart, Chart chart) {

        LineAndShapeRenderer renderer = (LineAndShapeRenderer) ((CategoryPlot) jfchart.getPlot()).getRenderer();

        renderer.setSeriesStroke(0, new BasicStroke(width));

        renderer.setSeriesStroke(1, new BasicStroke(width));

        renderer.setSeriesStroke(2, new BasicStroke(width));

 

        renderer.setSeriesLinesVisible(0, chart.isThreeD());

        renderer.setSeriesLinesVisible(1, showLine);

        renderer.setSeriesLinesVisible(2, showLine);

 

        renderer.setSeriesShapesVisible(0, showShape);

        renderer.setSeriesShapesVisible(1, showShape);

        renderer.setSeriesShapesVisible(2, showShape);

         

        renderer.setSeriesPaint(0, ChartColors.COLOR_1);

        renderer.setSeriesPaint(1, ChartColors.COLOR_2);

        renderer.setSeriesPaint(2, ChartColors.COLOR_3);

        return false;

    }

 

    public void setWidth(int width) {

        this.width = width;

    }

 

    public void setShowLine(boolean showLine) {

        this.showLine = showLine;

    }

 

    public void setShowShape(boolean showShape) {

        this.showShape = showShape;

    }

}




3. Model :

3.1. ChartData.java

package demo.chart.line;

 

import org.zkoss.zul.CategoryModel;

import org.zkoss.zul.SimpleCategoryModel;

 

public class ChartData {

     

    public static CategoryModel getModel() {

        CategoryModel model = new SimpleCategoryModel();

        String[] category = { "Predict", "Actual", "Establishment" };

        model.setValue(category[0], "Jan", new Integer(25));

        model.setValue(category[0], "Feb", new Integer(35));

        model.setValue(category[0], "Mar", new Integer(45));

        model.setValue(category[0], "Apr", new Integer(48));

        model.setValue(category[0], "May", new Integer(53));

        model.setValue(category[0], "Jun", new Integer(62));

 

        model.setValue(category[1], "Jan", new Integer(28));

        model.setValue(category[1], "Feb", new Integer(33));

        model.setValue(category[1], "Mar", new Integer(40));

        model.setValue(category[1], "Apr", new Integer(53));

        model.setValue(category[1], "May", new Integer(58));

        model.setValue(category[1], "Jun", new Integer(75));

 

        model.setValue(category[2], "Jan", new Integer(40));

        model.setValue(category[2], "Feb", new Integer(55));

        model.setValue(category[2], "Mar", new Integer(65));

        model.setValue(category[2], "Apr", new Integer(57));

        model.setValue(category[2], "May", new Integer(63));

        model.setValue(category[2], "Jun", new Integer(68));

        return model;

    }

}




3.2. ChartColor.java

Hasil :

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