Draggable points on zk charts

asked 2019-09-21 02:01:51 +0800

bztom35 gravatar image bztom35
103 4

updated 2019-09-24 10:20:10 +0800

cor3000 gravatar image cor3000
6270 2 7
ZK Team

Is it possible to do something like this on Zk Charts?

I am aware Zk Charts is based on highcharts: an example at jsfiddle

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2019-09-24 10:09:07 +0800

cor3000 gravatar image cor3000
6270 2 7
ZK Team

updated 2019-09-30 18:51:54 +0800

I don't think this 3rd party plugin draggable-points will, be included in the next version, since it's already deprecated. Instead it says draggable functionality will be provided by Highcharts by default plotOptions.series.dragDrop (since 6.2.0).

The next major version of ZK Charts will contain an updated Highcharts version anyway which should include the dragDrop automatically.

related Feature Request: ZKCHARTS-84

link publish delete flag offensive edit

answered 2019-09-23 16:21:45 +0800

cor3000 gravatar image cor3000
6270 2 7
ZK Team

updated 2019-09-24 10:18:03 +0800

yes it is possible I did a few tests and the example mostly just works the same way with ZK 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 */
(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
}(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"?>
    <charts id="mychart" apply="ChartsDndComposer"/>

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> {
    public void doAfterCompose(Charts chart) throws Exception {
        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()));
link publish delete flag offensive edit

answered 2019-09-24 00:49:34 +0800

bztom35 gravatar image bztom35
103 4

updated 2019-09-24 01:18:01 +0800

Is this feature will be integrated into the next version of the zk-charts component? I am planning to use the commercial version of the zk-charts.

link publish delete flag offensive edit


update: ZKCHARTS-84 has been implemented in ZK Charts

jeanher ( 2021-03-17 10:36:08 +0800 )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




Asked: 2019-09-21 02:01:51 +0800

Seen: 17 times

Last updated: Sep 30 '19

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