gChart Dates and Time

Community Driven Extensions Project
Post Reply
mygeorgyboy
Posts: 8
Joined: 19 Aug 2011, 06:08

03 Mar 2018, 03:34

Hi, I'm trying to create a gChart with Date axis, in google charts you can specify the datatype like data.addColumn('date', 'Season Start Date');

In Primefaces extensions show case I only see strings in addColumn method.
Is there actually a way to generate gChart with dates xAxis ?

Thanks in advice

User avatar
Melloware
Posts: 1226
Joined: 22 Apr 2013, 15:48

03 Mar 2018, 21:57

Good question. Let me investigate.
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

User avatar
Melloware
Posts: 1226
Joined: 22 Apr 2013, 15:48

05 Mar 2018, 14:53

You are right it looks like Column is only a list of Objects there is no datatype.

Code: Select all

Collection<Object> getColumns();
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

mygeorgyboy
Posts: 8
Joined: 19 Aug 2011, 06:08

05 Mar 2018, 20:26

Melloware wrote:
05 Mar 2018, 14:53
You are right it looks like Column is only a list of Objects there is no datatype.

Code: Select all

Collection<Object> getColumns();
Thanks. Is there a way I can help to implement this change, Google Charts are really superior to jqPlot, and it would be nice to all Primefaces developers to have a decent structured way to show charts, just like the one in Primefaces extensions.

User avatar
Melloware
Posts: 1226
Joined: 22 Apr 2013, 15:48

05 Mar 2018, 21:07

Sure thing the source code is here: https://github.com/primefaces-extensions/core

You can make any fixes you want and submit that as a Pull Request and I can review them and implement them.

Our showcase app is here: https://github.com/primefaces-extensions/showcase

You can run "mvn clean jetty:run" to test your changes by running the app at localhost:8080.
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

mygeorgyboy
Posts: 8
Joined: 19 Aug 2011, 06:08

06 Mar 2018, 05:33

Melloware wrote:
05 Mar 2018, 21:07
Sure thing the source code is here: https://github.com/primefaces-extensions/core

You can make any fixes you want and submit that as a Pull Request and I can review them and implement them.

Our showcase app is here: https://github.com/primefaces-extensions/showcase

You can run "mvn clean jetty:run" to test your changes by running the app at localhost:8080.
Upss to much advanced to me, I was too optimist. I review the code and I thing the easiest way is to include a new GChartType element TS("TimeSerieChart"), and in the render code change the first column type to Date in order to have a timeseries axis., but i did not find where to change it. Any way thanks for the work, gChart are great in spite of this limitations. Thanks a lot

User avatar
Melloware
Posts: 1226
Joined: 22 Apr 2013, 15:48

06 Mar 2018, 14:30

Do me a favor. Maybe an easier way would be for you to build in JSFiddle or something a pure javascript GChart that uses the TimeSeries so I can see the javascript?

That takes PrimeFaces out if it altogether...
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

mygeorgyboy
Posts: 8
Joined: 19 Aug 2011, 06:08

06 Mar 2018, 20:19

Melloware wrote:
06 Mar 2018, 14:30
Do me a favor. Maybe an easier way would be for you to build in JSFiddle or something a pure javascript GChart that uses the TimeSeries so I can see the javascript?

That takes PrimeFaces out if it altogether...
I Found a way to do it with the actual code. I need to pass an object instead of a String to the GChartModelBuilder.addColumn method.
I thigh It would be worth it to include an example like this in the Primefaces extension show case page.


public void generateModel() {

// This is an object that will be use instead or a simple String column
Map<String, Object> dateColumn = new HashMap<String, Object>();
dateColumn.put("type", "date");
dateColumn.put("label", "Date");

chartModel = new GChartModelBuilder().setChartType(GChartType.LINE)
.addColumns(dateColumn, "Region 1", "Region 2")
.addRow("Date(2012, 12, 31)", 1000, 600) // 3 Years difference, in chart you can see 2013 and 2014 on the axis
.addRow("Date(2015, 12, 31)", 1100, 1300)
.addRow("Date(2016, 12, 31)", 1230, 1800)
.addRow("Date(2017, 12, 31)", 1500, 1800)
.build();
}


<h:body>
<p:messages autoUpdate="true" />
<p:outputPanel id="container" layout="block">
<pe:gChart value="#{basicGChartController.chart}" height="400"
title="Sales trend" />
</p:outputPanel>

</h:body>

mygeorgyboy
Posts: 8
Joined: 19 Aug 2011, 06:08

06 Mar 2018, 20:23

mygeorgyboy wrote:
03 Mar 2018, 03:34
Hi, I'm trying to create a gChart with Date axis, in google charts you can specify the datatype like data.addColumn('date', 'Season Start Date');

In Primefaces extensions show case I only see strings in addColumn method.
Is there actually a way to generate gChart with dates xAxis ?

Thanks in advice
I Found a way :D . I need to pass an object instead of a String to the GChartModelBuilder.addColumn method.

public void generateModel() {
// This is an object that will be use instead or a simple String column
Map<String, Object> dateColumn = new HashMap<String, Object>();
dateColumn.put("type", "date");
dateColumn.put("label", "Date");

chartModel = new GChartModelBuilder().setChartType(GChartType.LINE)
.addColumns(dateColumn, "Region 1", "Region 2")
.addRow("Date(2012, 12, 31)", 1000, 600) // 3 Years difference, in chart you can see 2013 and 2014 on the axis
.addRow("Date(2015, 12, 31)", 1100, 1300)
.addRow("Date(2016, 12, 31)", 1230, 1800)
.addRow("Date(2017, 12, 31)", 1500, 1800)
.build();
}


<h:body>
<p:messages autoUpdate="true" />
<p:outputPanel id="container" layout="block">
<pe:gChart value="#{basicGChartController.chart}" height="400" title="Sales trend" />
</p:outputPanel>
</h:body>

User avatar
Melloware
Posts: 1226
Joined: 22 Apr 2013, 15:48

06 Mar 2018, 22:01

Awesome job!
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests