Menu

Annotations

Velo
2014-12-08
2014-12-10
  • Velo

    Velo - 2014-12-08

    Hi, can you please tell me, is there an alternative available in java gwt highcharts to this highcharts plugin http://blacklabel.github.io/annotations/ - for setting custom text comments on the chart series/data points? or how it can be used in java with gwt highcharts, and how can be saved inserted comments on chart?
    Thank you

     
  • Shawn Quinn

    Shawn Quinn - 2014-12-09

    Assuming you add that plugin JS to your page, you should then be able to support this using the "Chart.setOption()" method. E.g. something like:

    JSONObject annotation1 = new JSONObject();
    JSONObject annotationTitle1 = new JSONObject();
    annotationTitle1.put("text", new JSONString("Annotation 1"));
    annotation1.put("xValue", new JSONNumber(4));
    annotation1.put("yValue", new JSONNumber(125));
    annotation1.put("title", annotationTitle1);
    
    JSONObject annotation2 = new JSONObject();
    JSONObject annotationTitle2 = new JSONObject();
    annotationTitle2.put("text", new JSONString("Annotation 2"));
    annotation2.put("xValue", new JSONNumber(3));
    annotation2.put("yValue", new JSONNumber(111));
    annotation2.put("title", annotationTitle2);
    
    JSONArray annotations = new JSONArray();   
    annotations.set(0, annotation1);
    annotations.set(1, annotation2);
    chart.setOption("annotations", annotations);
    

    Hope that helps!

     

    Last edit: Shawn Quinn 2014-12-09
  • Velo

    Velo - 2014-12-10

    Thank you Shawn for answering, am afraid i didn't get it, here you setting the text for annotations static, but what i needed it is get the inserted text from any user if he inspect the chart for example at some point and wanted to make some comments on the datapoint with click to the "T" button of this annotations.js plugin wich appears on the chart after binding this plugin, and a text wolud be inserted into the textarea and appears on the chart with "done" button, i want to get this texts that was inserted, and save it in any way, what i cant understand, is how to get this text after it was inserted and save it into db for this point at this time it was added, so that i can then later in one week for example can get this comments showed at this chart.
    Thank you,
    I appreciate your help!

     
  • Shawn Quinn

    Shawn Quinn - 2014-12-10

    Looks like that API supports adding annotations after the chart is rendered as well, so you should be able to call that API from GWT with JSNI like so (note that the "Chart.getNativeChart()" method is only available after the chart is rendered):

    JSONObject annotation3 = new JSONObject();
    JSONObject annotationTitle3 = new JSONObject();
    annotationTitle3.put("text", new JSONString("Annotation 3"));
    annotation3.put("xValue", new JSONNumber(4));
    annotation3.put("yValue", new JSONNumber(125));
    annotation3.put("title", annotationTitle3);
    nativeAddAnnotation(chart.getNativeChart(), annotation3.getJavaScriptObject());
    

    Where the JSNI for that "nativeAddAnnotation()" method would look something like the following:

    private static native boolean nativeAddAnnotation(JavaScriptObject chart, JavaScriptObject annotation) /*-{
        chart.addAnnotation(annotation);
    }-*/;
    

    Note that GWT Highcharts also supports various event bindings so that you have a way to respond to user's clicking in the chart area (e.g. Chart.setClickEventHandler(), Chart.setSelectionEventHandler(), etc.)

     

Log in to post a comment.