GEO Chart added programmatically is not displayed

Community Driven Extensions Project
Post Reply
yavuzselimcakir
Posts: 18
Joined: 12 Mar 2014, 17:13

31 May 2018, 12:42

Hello,

I add charts to a page programmatically. All charts work fine except GEO chart. Following is the code where I create the chart and set the value expression for the model. 'panelGrid' is the component on my web page where I add the chart:

Code: Select all

org.primefaces.extensions.component.gchart.GChart chart = new org.primefaces.extensions.component.gchart.GChart();
ValueExpression valueEx1 = app.getExpressionFactory().createValueExpression(f.getELContext(), "#{homePage.chartModelForReport}", GChartModel.class);
chart.setValueExpression("value", valueEx1);
panelGrid.getChildren().add(chart);
and below is the code part where I create and build the chart model:

Code: Select all

        GChartModel geoChartModel = null;
        GChartModelBuilder chartBuilder = new GChartModelBuilder();
        Map<String, Object> colorAxis = new HashMap<String, Object>();
        String[] colorRanges = new String[2];
        colorRanges[0] = "yellow";
        colorRanges[1] = "red";
        colorAxis.put("colors", colorRanges);
        chartBuilder.addOption("colorAxis", colorAxis);
        chartBuilder.addOption("region", "TR");
        chartBuilder.addOption("resolution", "provinces");
        chartBuilder.addOption("displayMode", "regions");
        chartBuilder.setChartType(GChartType.GEO);
		
        HashMap<String, double[]> valuesOfChart = prepareRowsOfChart();  //prepare rows
        Collection<String> columns = prepareColumnsOfChart();   //prepare columns
        chartBuilder.addColumns(columns);
        for (Map.Entry pair : valuesOfChart.entrySet()) {
             chartBuilder.addRow((String) pair.getKey(), ((double[]) pair.getValue())[0], ((double[]) pair.getValue())[1]);
        }
        geoChartModel = chartBuilder.build();
As a result, nothing is displayed on the page. But when I check the source of the page I see the following inside 'panelGrid':

Code: Select all

<div id="mainForm:GEOCHART" class="ui-g-12 ui-md-12 ui-lg-12 ui-g-nopad">
	<input id="mainForm:GeoChart_0_0_hidden" name="mainForm:GeoChart_0_0_hidden" type="hidden" />
	<div id="mainForm:GeoChart_0_0"></div>
	<script id="mainForm:GeoChart_0_0_s" type="text/javascript">PrimeFaces.cw("ExtGChart","widget_mainForm_GeoChart_0_0",{id:"mainForm:GeoChart_0_0",chart:"{\"type\":\"GeoChart\",\"options\":{\"region\":\"TR\",\"resolution\":\"provinces\",\"colorAxis\":{\"colors\":[\"yellow\",\"red\"]},\"displayMode\":\"regions\"},\"data\":[[[\"Key\",\"\"]],[\"\",4311.0],[\"İSTANBUL\",11529.0],[\"ADANA\",299.0],[\"VAN\",16.0]]}"});
	</script>
</div>
What is missing?

Thanks.
Yavuz Selim ÇAKIR
primeFaces 8.0.5
pf-extensions 8.0.4
myfaces 2.3.7
Tomcat 9

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

31 May 2018, 13:11

A few things.

1. Did you follow this example: https://www.primefaces.org/showcase-ext ... ochart.jsf

2. Did you make sure to add the script to your page?

Code: Select all

<script src="https://www.gstatic.com/charts/loader.js"></script>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

yavuzselimcakir
Posts: 18
Joined: 12 Mar 2014, 17:13

08 Jun 2018, 11:12

Yes I have added the script.

In fact geo chart is displayed as normal when I add the chart as a tag inside xhtml. Problem is, chart is not displayed when I add the chart programmatically...
Yavuz Selim ÇAKIR
primeFaces 8.0.5
pf-extensions 8.0.4
myfaces 2.3.7
Tomcat 9

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

08 Jun 2018, 13:23

Oh I see. So you are not using XHTML you are building your entire page in Java code programattically?

Is it only GeoChart that has this issue or all Google Charts?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

yavuzselimcakir
Posts: 18
Joined: 12 Mar 2014, 17:13

11 Jun 2018, 13:42

I do not have any other google chart component in my project. Yes, I build the page programmatically.
Yavuz Selim ÇAKIR
primeFaces 8.0.5
pf-extensions 8.0.4
myfaces 2.3.7
Tomcat 9

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

11 Jun 2018, 14:27

Strange. It looks like all the of HTML and Javascript is being rendered correctly by the component.

Can you provide a fully working sample using the following Test project: https://github.com/primefaces/primefaces-test

Simply clone that project and create the smallest working example that will help us see if we can figure it out.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

MichaelJem
Posts: 4
Joined: 13 Jun 2018, 20:59
Location: Virgin Islands
Contact:

28 Jul 2018, 11:23

If you get "Page Not Found" this indicates that route is not correct.

Looks like something fails in between. Anything in the error log?

yavuzselimcakir
Posts: 18
Joined: 12 Mar 2014, 17:13

28 Jan 2019, 15:09

Finally I found the reason:

While building the GChartModel you add column headings via addColumns method. If you add a collection, the resulting javascript that primefaces creates looks like [['key','value']] which in fact should not contain the outside brakets.

Code: Select all

	GChartModel geoChartModel = null;
        GChartModelBuilder chartBuilder = new GChartModelBuilder();
	Collection<String> columns = new ArrayList<String>();
	columns.add("Key");
	columns.add("Value");
	chartBuilder.addColumns(columns );  //If you write in this way, resulting javascript will include [['key','value']] and there is no chart display
	chartBuilder.addColumns(columns.toArray());  //this is the right way.	
What is more, I had to add a dummy pe:gChart tag inside my xhtml page with rendered attribute set to false. Without that tag, the programmatically added chart is still not loaded...

Code: Select all

<pe:gChart rendered="false" height="1" width="1" value="#{homePage.dummyChartModel}" />
Yavuz Selim ÇAKIR
primeFaces 8.0.5
pf-extensions 8.0.4
myfaces 2.3.7
Tomcat 9

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 4 guests