ChartistJSF

ChartistJSF, Highly Customizable Responsive Charts for JavaServer Faces.

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

Maven

PrimeFaces 7.x

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

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

• Hatem Alimam

License

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

NOTICE

• This product includes software developed by Prime Technology
• This product includes software developed by The jQuery Project
• This product includes software developed by Gion Kunz