gChart Dates and Time

[mygeorgyboy]

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

[Melloware]

Good question. Let me investigate.

[Melloware]

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

Code: Select all

Collection<Object> getColumns();

[mygeorgyboy]

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.

[Melloware]

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.

[mygeorgyboy]

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

[Melloware]

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...

[mygeorgyboy]

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]

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 . 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>

[Melloware]

Awesome job!