Zkoss Framework JFree Chart - IV [ Dial ]

Dial 

Source :

File Zul :

1.1. dial_chart.zull

<hlayout spacing="10px" apply="org.zkoss.bind.BindComposer"

    viewModel="@id('vm') @init('demo.chart.dial.DialChartVM')">

    <chart id="chartC" width="250" height="250"

        paneColor="#ffffff" type="dial"

        model="@bind(vm.celsiusModel)"/>

    <chart id="chartF" width="250" height="250"

        paneColor="#ffffff" type="dial"

        model="@bind(vm.fahrenheitModel)"/>

</hlayout>




1.2. dial_chart_ctrl.zull

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

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

    viewModel="@id('vm') @init('demo.chart.dial.DialChartConfigVM')">   

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

        <caption label="Converter" />

        <vlayout>

            <hbox align="center">

                <label value="Celsius : " width="70px" style="display:block" />

                <intbox width="50px" constraint="${c:new2('demo.chart.dial.NumberConstraint',-15,65)}"

                    value="@bind(vm.celsius)"

                    onChange="@global-command('configChanged',isCelsius=true,degree=vm.celsius)"/>

                °C

            </hbox>

            <hbox align="center">

                 <label value="Fahrenheit : " width="70px" style="display:block" />

                <intbox width="50px" constraint="${c:new2('demo.chart.dial.NumberConstraint',5,149)}"

                    value="@bind(vm.fahrenheit)"

                    onChange="@global-command('configChanged',isCelsius=false,degree=vm.fahrenheit)"/>

                °F

            </hbox>

        </vlayout>

    </groupbox>

</vlayout>




2. View Model :

2.1. dialchartVM.java

package demo.chart.dial;

 

import org.zkoss.bind.annotation.BindingParam;

import org.zkoss.bind.annotation.GlobalCommand;

import org.zkoss.bind.annotation.Init;

import org.zkoss.zul.DialModel;

 

public class DialChartVM {

 

    DialModel celsiusModel;

    DialModel fahrenheitModel;

     

    public DialModel getCelsiusModel() {

        return celsiusModel;

    }

 

    public DialModel getFahrenheitModel() {

        return fahrenheitModel;

    }

 

    @Init

    public void init() {

        int celsius = 27;

        celsiusModel = ChartData.createCelsiusModel(celsius);

        fahrenheitModel = ChartData.createFahrenheitModel(ChartData.toFahrenhit(celsius));

    }

     

    @GlobalCommand("configChanged")

    public void onConfigChanged(

            @BindingParam("isCelsius") boolean isCelsius,

            @BindingParam("degree") int degree){

        if(isCelsius){

            celsiusModel.getScale(0).setValue(degree);

            fahrenheitModel.getScale(0).setValue(ChartData.toFahrenhit(degree));

        }else{

            celsiusModel.getScale(0).setValue(ChartData.toCelsius(degree));

            fahrenheitModel.getScale(0).setValue(degree);

        }

    }

}




2.2. dialchartconfig.java

package demo.chart.dial;

 

import org.zkoss.bind.annotation.DependsOn;

import org.zkoss.bind.annotation.Init;

 

 

public class DialChartConfigVM {

 

    int celsius;

    int fahrenheit;

     

    @Init

    public void init() {

        celsius = 27;

        fahrenheit = ChartData.toFahrenhit(celsius);

    }

 

    @DependsOn("fahrenheit")

    public int getCelsius() {

        return celsius;

    }

 

    public void setCelsius(int celsius) {

        this.celsius = celsius;

        fahrenheit = ChartData.toFahrenhit(celsius);

    }

 

    @DependsOn("celsius")

    public int getFahrenheit() {

        return fahrenheit;

    }

 

    public void setFahrenheit(int fahrenheit) {

        this.fahrenheit = fahrenheit;

        celsius = ChartData.toCelsius(fahrenheit);

    }

}




2.3. numbercontraint.java

package demo.chart.dial;

 

import org.zkoss.zk.ui.Component;

import org.zkoss.zk.ui.WrongValueException;

import org.zkoss.zul.Constraint;

 

public class NumberConstraint implements Constraint {

    private Integer LowerBound = 0, UpperBound = 0;

 

    public NumberConstraint(int LowerBound, int UpperBound) {

        this.LowerBound = LowerBound;

        this.UpperBound = UpperBound;

    }

 

    public void validate(Component comp, Object obj) throws WrongValueException {

        Integer degree = (Integer) obj; // Intbox

        if (obj == null || degree > UpperBound || degree < LowerBound)

            throw new WrongValueException(comp, "Only numbers between " + LowerBound + " and " + UpperBound + " are allowed.");

    }

}




3. Model :

3.1. ChartData.java

package demo.chart.dial;

 

import java.awt.Color;

 

import org.zkoss.zul.DialModel;

import org.zkoss.zul.DialModelScale;

 

import demo.chart.ChartColors;

 

public class ChartData {

 

    public static DialModel createCelsiusModel(int value){

        DialModel model = new DialModel();

        DialModelScale scale = model.newScale(-10.0, 60.0, 230, -280, 10.0, 4);

         

         

        //scale's configuration data

        scale.setValue(value);

        scale.setText("Celsius");

        scale.newRange(-10,  0, ChartColors.toHtmlColor(Color.getHSBColor(0.55f, 0.8f, 1)), 0.61, 0.603);

        scale.newRange(  0, 10, ChartColors.toHtmlColor(Color.getHSBColor(0.3f , 0.8f, 1)), 0.61, 0.603);

        scale.newRange( 10, 20, ChartColors.toHtmlColor(Color.getHSBColor(0.18f, 0.8f, 1)), 0.61, 0.603);

        scale.newRange( 20, 30, ChartColors.toHtmlColor(Color.getHSBColor(0.12f, 0.8f, 1)), 0.61, 0.603);

        scale.newRange( 30, 40, ChartColors.toHtmlColor(Color.getHSBColor(0.08f, 0.8f, 1)), 0.61, 0.603);

        scale.newRange( 40, 50, ChartColors.toHtmlColor(Color.getHSBColor(0.05f, 0.8f, 1)), 0.61, 0.603);

        scale.newRange( 50, 60, ChartColors.toHtmlColor(Color.getHSBColor(0.0f , 0.8f, 1)), 0.61, 0.603);

        scale.setTickColor("#FFFFFF");

        scale.setNeedleType("pin");

        scale.setNeedleColor("#FF0000");

         

        model.setFrameFgColor("#808080");

        model.setFrameBgAlpha(255);

        model.setFrameBgColor("#FFFFFF");

        model.setFrameBgColor1("#000000");

        model.setFrameBgColor2("#000000");

 

        model.setCapRadius(0.1);

         

        model.setGradientDirection("vertical");

         

        return model;

    }

 

    public static DialModel createFahrenheitModel(int value){

        DialModel model = new DialModel();

        DialModelScale scale = model.newScale(14, 140.0, 230, -280, 18.0, 8);

         

        //scale's configuration data

        scale.setValue(value);

        scale.setText("Fahrenheit");

        scale.newRange( 14,  32, ChartColors.toHtmlColor(Color.getHSBColor(0.55f, 0.8f, 1)), 0.91, 0.903);

        scale.newRange( 32,  50, ChartColors.toHtmlColor(Color.getHSBColor(0.3f , 0.8f, 1)), 0.91, 0.903);

        scale.newRange( 50,  68, ChartColors.toHtmlColor(Color.getHSBColor(0.18f, 0.8f, 1)), 0.91, 0.903);

        scale.newRange( 68,  86, ChartColors.toHtmlColor(Color.getHSBColor(0.12f, 0.8f, 1)), 0.91, 0.903);

        scale.newRange( 86, 104, ChartColors.toHtmlColor(Color.getHSBColor(0.08f, 0.8f, 1)), 0.91, 0.903);

        scale.newRange(104, 122, ChartColors.toHtmlColor(Color.getHSBColor(0.05f, 0.8f, 1)), 0.91, 0.903);

        scale.newRange(122, 140, ChartColors.toHtmlColor(Color.getHSBColor(0.0f , 0.8f, 1)), 0.91, 0.903);

        scale.setTickColor("#000000");

        scale.setNeedleColor("#FF0000");

         

        model.setFrameFgColor("#505050");

        model.setFrameBgAlpha(0);

        model.setFrameBgColor("#DDDDDD");

        model.setFrameBgColor1("#FFFFFF");

        model.setFrameBgColor2("#FFFFFF");

         

        model.setCapRadius(0.06);

         

        model.setGradientDirection("vertical");

         

        return model;

    }

 

    public static int toFahrenhit(int celsius){

        return Math.round(celsius * 9 / 5 + 32);

    }

     

    public static int toCelsius(int fahrenheit){

        return Math.round((fahrenheit - 32) * 5 / 9);

    }

}




3.2. ChartColor.java

Hasil :

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