Revision history [back]

yes it is possible I did a few tests and the example mostly just works the same way with ZK charts, it's more a matter of knowing the specific API to add custom attributes and how to initialize the custom js code at the right time.

The draggable-points.js script can be adjusted:

/*global document, Highcharts */
/* COMMENT OUT
(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {
*/
zk.afterLoad('chart', function() { /*LOAD WHEN ZK HAS LOADED THE 'chart' PACKAGE*/
    'use strict';
...
})/*)*/; /*END OF FILE*/

Now the script can be included in a page and will automatically initialize with zkcharts.

<?script src="draggable-points.js"?>
<zk>
    <charts id="mychart" apply="ChartsDndComposer"/>
</zk>

From java code you can then set the non standard attributes using addExtraAttr (not beautiful but possible allowing for low level access)

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.json.JSONObject;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.util.Composer;

public class ChartsDndComposer implements Composer<Charts> {
    @Override
    public void doAfterCompose(Charts chart) throws Exception {
        chart.setType(Charts.LINE);
        Series series = chart.getSeries(0);
        series.addPoint(1, 240);
        series.addPoint(2, 130);
        series.addPoint(4.5, 290);

        series.addExtraAttr("draggableX", new JavaScriptValue("true"));
        series.addExtraAttr("draggableY", new JavaScriptValue("true"));

        JSONObject events = new JSONObject();
        //since there are many, handle drag events at client side
        events.put("drag", new JavaScriptValue(
                "function (event) { console.log(this.x, this.y, this.index, this.series.index);}"));

        //fire drop events to the ZK component
        events.put("drop", new JavaScriptValue(
                "function(event) { zk.$('$mychart').fire('onDropPoint', " +
                        "{x: this.x, y: this.y, point: this.index, series: this.series.index}, " +
                        "{toServer: true}) }"));

        JSONObject pointOpts = new JSONObject();
        pointOpts.put("events", events);
        chart.getPlotOptions().getSeries().addExtraAttr("point", pointOpts);

        chart.addEventListener("onDropPoint", e -> System.out.println(e.getName() + e.getData()));
    }
}

yes it is possible I did a few tests and the example mostly just works the same way with ZK charts, charts (3.0.3 which is based on Highcharts 5.0.14), it's more a matter of knowing the specific API to add custom attributes and how to initialize the custom js code at the right time.

The draggable-points.js script can be adjusted:

/*global document, Highcharts */
/* COMMENT OUT
(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {
*/
zk.afterLoad('chart', function() { /*LOAD WHEN ZK HAS LOADED THE 'chart' PACKAGE*/
    'use strict';
...
})/*)*/; /*END OF FILE*/

Now the script can be included in a page and will automatically initialize with zkcharts.

<?script src="draggable-points.js"?>
<zk>
    <charts id="mychart" apply="ChartsDndComposer"/>
</zk>

From java code you can then set the non standard attributes using addExtraAttr (not beautiful but possible allowing for low level access)

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.json.JSONObject;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.util.Composer;

public class ChartsDndComposer implements Composer<Charts> {
    @Override
    public void doAfterCompose(Charts chart) throws Exception {
        chart.setType(Charts.LINE);
        Series series = chart.getSeries(0);
        series.addPoint(1, 240);
        series.addPoint(2, 130);
        series.addPoint(4.5, 290);

        series.addExtraAttr("draggableX", new JavaScriptValue("true"));
        series.addExtraAttr("draggableY", new JavaScriptValue("true"));

        JSONObject events = new JSONObject();
        //since there are many, handle drag events at client side
        events.put("drag", new JavaScriptValue(
                "function (event) { console.log(this.x, this.y, this.index, this.series.index);}"));

        //fire drop events to the ZK component
        events.put("drop", new JavaScriptValue(
                "function(event) { zk.$('$mychart').fire('onDropPoint', " +
                        "{x: this.x, y: this.y, point: this.index, series: this.series.index}, " +
                        "{toServer: true}) }"));

        JSONObject pointOpts = new JSONObject();
        pointOpts.put("events", events);
        chart.getPlotOptions().getSeries().addExtraAttr("point", pointOpts);

        chart.addEventListener("onDropPoint", e -> System.out.println(e.getName() + e.getData()));
    }
}