Highly Customizable Responsive Charts for JavaServer Faces.
Java JavaScript
Clone or download
Latest commit 42e6d21 Jul 10, 2017
Permalink
Failed to load latest commit information.
src/main showGridBackground Support Jul 10, 2017
.gitignore Label Fix + AnimateAdvanced Dount Jun 30, 2015
LICENSE Initial commit Apr 9, 2015
README.md Updated chartist.js + plugins support Jul 10, 2017
pom.xml 3.0 Final Jul 10, 2017
pom.xml.versionsBackup 0.3 Fix May 11, 2015

README.md

ChartistJSF


ChartistJSF, Highly Customizable Responsive Charts for JavaServer Faces.

ChartistJSF-Line ChartistJSF-Bar

Overview


ChartistJSF is based on Chartist.js charts, which is a product of a community that was disappointed about the abilities provided by other charting libraries. The components are built on top of PrimeFaces providing the maximum harmony in todays modern JSF applications.

Facts


  • Great flexibility while using clear separation of concerns (Style with CSS & control with JS)
  • Usage of SVG (Yes! SVG is the future of illustration in web!)
  • Fully responsive and DPI independent
  • Responsive configuration with media queries
  • Fully compatible with JSF, PrimeFaces components, and AJAX updates.

Why ChartistJSF and Not PrimeFaces Charts


PrimeFaces relies on jqPlot to draw the charts, jqPlot uses canvas for drawing the charts which limits the full control over the generated DOM elements, therefore styling and full controls can be a headache.

From that point the necessity for another Chart library came into the way (along-side PrimeFaces), ChartistJSF relies on Chartist.js to generate the Chart elements in pure SVG, the SVG charts are defined in XML. As a result, every SVG element is appended to the Document Object Model (DOM) and can be manipulated using a combination of JavaScript and CSS. Moreover, you can attach an event handlers to a SVG element or update its properties based on another document event. Canvas, on the other hand, is a simple graphics API. It draws pixels and nothing more.

Responsive is built in mind from the start and with media-queries it's easy to control each case apart.

Getting Started


ChartistJSF can be downloaded manually or via maven.

Downloads
Version Binary Source PrimeFaces Version
3.0 Download Download 6.x
1.0 Download Download 5.x
Maven

PrimeFaces 6.x

<dependency>
	<groupId>org.chartistjsf</groupId>
	<artifactId>ChartistJSF</artifactId>
	<version>3.0</version>		
</dependency>

PrimeFaces 5.x

<dependency>
	<groupId>org.chartistjsf</groupId>
	<artifactId>ChartistJSF</artifactId>
	<version>1.0</version>		
</dependency>

Usage


Namespace
xmlns:ct="http://www.chartistjsf.org/charts"
Component
<ct:chart type="line" model="#{mainBean.lineModel}">
</ct:chart>

Further Examples


Please refer to the showcase website in order to see the full usage.

Contribution


You are very welcome to contribute to this project, just fork and let me know :)

Developers


License


Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0

NOTICE