1

a chart for machine state

asked 2014-04-02 11:46:39 +0800

elmetni gravatar image elmetni
145 7

updated 2014-04-02 17:07:22 +0800

chillworld gravatar image chillworld flag of Belgium
5357 4 9
https://github.com/chillw...

Hello everyone,

I'm working on a ZK project for a manufacturing Dashboar what I need to do is visualising machine state with a chart like this one :
www.mediafire.com/view/apadt0ljw534jlw/barcode_charte.png

I have no idea how to do it using ZK charts do you have any suggestion pls ? thx

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2014-04-03 08:30:04 +0800

RaymondChao gravatar image RaymondChao
386 1 4
ZK Team

Hello elmetni,

The barcode chart could be implemented by line chart. Just need to do the following additional instructions:

  1. Widen the lines's width
  2. Change the line style to square
  3. Insert null value point to break the line

Then the chart will show as below.

machine state

Here is the sample code:

sample.zul

<window apply="MachineStateComposer">
    <charts id="chart" title="Machine State for Order 8210 &amp; 8309"
        height="300" width="600"/>
</window>

MachineStateComposer.java

import java.util.List;

import org.zkoss.chart.*;
import org.zkoss.chart.plotOptions.LinePlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

public class MachineStateComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
        super.doAfterCompose(comp);

        chart.getXAxis().setType("datetime");
        YAxis yAxis = chart.getYAxis();
        yAxis.setTitle("");
        yAxis.setGridLineColor("#FFFFFF");
        yAxis.setCategories(MachineStateData.getCategories());

        LinePlotOptions plotOptions = chart.getPlotOptions().getLine();

        // 1. widen the line's width
        plotOptions.setLineWidth(50);
        plotOptions.getMarker().setEnabled(false);
        // 2. change line style to square
        plotOptions.setDashStyle("solid");

        initSeries();

        hideSomething();
    }

    private void initSeries() {
        List<MachineState> states = MachineStateData.getMachineStates();
        for (int i = 0, length = states.size(); i < length; i++) {
            Series series = chart.getSeries(i);
            MachineState state = states.get(length - i - 1);
            series.setColor(state.getColor());
            series.setName(state.getName());
            for (Interval interval: state.getInvervals()) {
                series.addPoint(new Point(interval.getFrom(), i));
                series.addPoint(new Point(interval.getTo(), i));
                // 3. insert null point to break the line
                series.addPoint(new Point(interval.getTo() + 100, null));
            }
        }
    }

    private void hideSomething() {
        chart.getLegend().setEnabled(false);
        chart.getTooltip().setEnabled(false);
        chart.getExporting().setEnabled(false);
    }
}

MachineStateData.java

import java.util.LinkedList;
import java.util.List;

public class MachineStateData {
    private static List<MachineState> machineStates;
    static {
        machineStates = new LinkedList<MachineState>();
        MachineState setup = new MachineState("Machine Setup", "#1ABC9C");
        setup.addInverval("15:50, 10-11-2013", "16:00, 10-11-2013");
        setup.addInverval("05:00, 10-13-2013", "05:30, 10-13-2013");
        machineStates.add(setup);

        MachineState running = new MachineState("Running", "#27AE60");
        running.addInverval("16:00, 10-11-2013", "17:40, 10-11-2013");
        running.addInverval("18:00, 10-11-2013", "18:30, 10-11-2013");
        running.addInverval("18:40, 10-11-2013", "19:20, 10-11-2013");
        running.addInverval("19:30, 10-11-2013", "20:50, 10-11-2013");
        running.addInverval("21:00, 10-11-2013", "21:10, 10-11-2013");
        running.addInverval("21:30, 10-11-2013", "23:00, 10-11-2013");
        running.addInverval("23:40, 10-11-2013", "23:50, 10-11-2013");
        running.addInverval("05:30, 10-13-2013", "06:00, 10-13-2013");
        running.addInverval("06:10, 10-13-2013", "08:50, 10-13-2013");
        running.addInverval("09:00, 10-13-2013", "09:10, 10-13-2013");
        running.addInverval("09:10, 10-13-2013", "09:30, 10-13-2013");
        running.addInverval("09:50, 10-13-2013", "11:20, 10-13-2013");
        running.addInverval("11:30, 10-13-2013", "12:30, 10-13-2013");
        running.addInverval("12:40, 10-13-2013", "15:00, 10-13-2013");
        machineStates.add(running);

        MachineState idle = new MachineState("Idle", "#C0392B");
        idle.addInverval("17:30, 10-11-2013", "17:40, 10-11-2013");
        idle.addInverval("18:00, 10-11-2013", "18:10, 10-11-2013");
        idle.addInverval("18:20, 10-11-2013", "18:30, 10-11-2013");
        idle.addInverval("18:30, 10-11-2013", "18:50, 10-11-2013");
        idle.addInverval("19:30, 10-11-2013", "19:50, 10-11-2013");
        idle.addInverval("20:00, 10-11-2013", "20:10, 10-11-2013");
        idle.addInverval("20:30, 10-11-2013", "20:40, 10-11-2013");
        idle.addInverval("21:00, 10-11-2013", "21:20, 10-11-2013");
        idle.addInverval("21:40, 10-11-2013", "21:50, 10-11-2013");
        idle.addInverval("22:00, 10-11-2013", "22:20, 10-11-2013");
        idle.addInverval("22:50, 10-11-2013", "23:00, 10-11-2013");
        idle.addInverval("23:10, 10-11-2013", "23:40, 10-11-2013");
        idle.addInverval("23:50, 10-11-2013", "00:20, 10-12-2013");
        idle.addInverval("06:00, 10-13-2013", "06:10, 10-13-2013");
        idle.addInverval("06:30, 10-13-2013", "06:40, 10-13-2013");
        idle.addInverval("07:00, 10-13-2013", "07:10, 10-13-2013");
        idle.addInverval("07:30, 10-13-2013", "07:40, 10-13-2013");
        idle.addInverval("07:50, 10-13-2013", "08:00, 10-13-2013");
        idle.addInverval("08:20, 10-13-2013", "08:30, 10-13-2013");
        idle.addInverval("08:50, 10-13-2013", "09:20, 10-13-2013");
        idle.addInverval("09:50, 10-13-2013", "10:00, 10-13-2013");
        idle.addInverval("11:20, 10-13-2013", "11:30, 10-13-2013");
        idle.addInverval("12:20, 10-13-2013", "12:40, 10-13-2013");
        idle.addInverval("14:10, 10-13-2013", "14:20, 10-13-2013");
        idle.addInverval("15:00, 10-13-2013", "15:10, 10-13-2013");
        machineStates.add(idle);

        MachineState off = new MachineState("Machine Off", "#BDC3C7");
        off.addInverval("18:30, 10-11-2013", "18:40, 10-11-2013");
        off.addInverval("18:50, 10-11-2013", "19:00, 10-11-2013");
        machineStates.add(off);
    }

    public static List<MachineState> getMachineStates() {
        return machineStates;
    }

    public static List<String> getCategories() {
        List<String> categories = new LinkedList<String>();
        for (int i = machineStates.size() - 1; i >= 0; i--) {
            categories.add(machineStates.get(i).getName());
        }
        return categories;
    }
}

MachineState.java

import java.util.LinkedList;
import java.util.List;

public class MachineState {

    private final String name, color;

    private List<Interval> invervals;

    public MachineState(String name, String color) {
        this.name = name;
        this.color = color;
        invervals = new LinkedList<Interval>();
    }

    public String getName() {
        return name;
    }

    public String getColor() {
        return color;
    }

    public void addInverval(String from, String to) {
        invervals.add(new Interval(from, to));
    }

    public List<Interval> getInvervals() {
        return invervals;
    }
}

Interval.java

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.TimeZone;

public class Interval {
    private long from, to;
    private static final Calendar calendar = Calendar.getInstance();
    private static final SimpleDateFormat format = new SimpleDateFormat("kk:mm, MM-dd-yyyy");
    public Interval(String from, String to) {
        this.from = parse(from);
        this.to = parse(to);
    }

    public long getFrom() {
        return from;
    }

    public long getTo() {
        return to;
    }

    private static long parse(String date) {
        try {
            format.setTimeZone(TimeZone.getTimeZone("GMT"));
            calendar.setTime(format.parse(date));
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return calendar.getTimeInMillis();
    }
}
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2014-04-02 11:46:39 +0800

Seen: 21 times

Last updated: Apr 03 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More