Git Product home page Git Product logo

chartistjsf's Introduction

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
0.9 Download Download
Maven
<dependency>
	<groupId>org.chartistjsf</groupId>
	<artifactId>ChartistJSF</artifactId>
	<version>0.9</version>		
</dependency>

Usage


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


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


chartistjsf's People

Contributors

hatemalimam avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.