3

Simple question, but I can't come up with the answer.

In plain GCharts, I have this:

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Value 1');
data.addColumn('number', 'Value 2');

However, how can I specify that the values are datetime and number with the model builder of PrimerFaces?

The .addColumns() method just adds the items as List<String>:

GChartModelBuilder lineChartModelBuilder = new GChartModelBuilder();
lineChartModelBuilder.setChartType(GChartType.LINE);    
lineChartModelBuilder.addColumns("Time");
lineChartModelBuilder.addColumns("Value 1");
lineChartModelBuilder.addColumns("Value 2");

Thank you!

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
EmilioSG
  • 380
  • 3
  • 5
  • 18

1 Answers1

3

I am assuming you are using a very old PF Extensions version? The reason I say that is back in 2016 this was fixed to use List<Object> instead of List<String> and was released in PrimeFaces Extensions 6.1 or higher.

Latest version of the code can be seen here: https://github.com/primefaces-extensions/core/blob/master/src/main/java/org/primefaces/extensions/component/gchart/model/GChartModelBuilder.java

Fixed back in 2016: https://github.com/primefaces-extensions/core/commit/6c473bbc50920bfdaedca02b918c29a5ead8d4d0#diff-f3a907dcc2d19626bf60db5bbebba6be

Update:

If you want to add the data using key value pairs it should be possible. Since GChart usese Google GSON to turn the Java code into JSON to the client i would think if you put a String array value in the field it would deserialize like you were expecting.

Create a POJO representing the column:

public class GChartModelColumn {

    // column label
    private final String label;

    // column type: number, date, datetime
    private final String type;

    public GChartModelColumn(String label, String type) {
        super();
        this.label = label;
        this.type = type;
    }

    public String getLabel() {
        return label;
    }
    public String getType() {
        return type;
    }
}

Then add the columns using the model above like...

lineChartModelBuilder.addColumns(
new GChartModelColumn("Time", "datetime"), 
new GChartModelColumn("Value 1", "number"), 
new GChartModelColumn("Value 2", "number"));

Then in the JS code it converts your data object into a Google DataTable.

var dataTable = google.visualization.arrayToDataTable(this.data);
Melloware
  • 10,435
  • 2
  • 32
  • 62
  • Thank you Melloware. In the latest PF Extensions version I can add an Object as column, but how can I structure that object so the chart loads the alias and type? Something like .addColumns(new Pair("number", "Value 1")); or .addColumns(new Pair("datetime", "Time")); – EmilioSG Mar 16 '19 at 13:39
  • It should work, but instead of adding the pair, it just creates two columns. If I insert 3 pairs, I get 6 columns: https://i.imgur.com/qtdiNYU.png – EmilioSG Mar 16 '19 at 14:06
  • Yeah that's not right. Looking at the source it just adds those objects: https://github.com/primefaces-extensions/core/blob/master/src/main/java/org/primefaces/extensions/component/gchart/model/GChartModelBuilder.java#L56-L64 . So you might just have to look at how Google GSON deserializes to put the right objects in to get the key value pairs you want. You are really close just need to fiddle with it to produce the JSON you want. – Melloware Mar 16 '19 at 14:12
  • I get the following error: Data column(s) for axis #0 cannot be of type string – EmilioSG Mar 17 '19 at 02:51
  • OK I was able to test and get it working and updated my solution above! – Melloware Mar 17 '19 at 20:01