hatemalimam / chartistjsf

Highly Customizable Responsive Charts for JavaServer Faces.

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

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

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

chartistjsf's Issues

ChartRenderer.startScript does not work with PF 8.0 due to Primefaces CoreRenderer API change

Relevent error:

java.lang.NoSuchMethodError: org.chartistjsf.component.chart.ChartRenderer.startScript(Ljavax/faces/context/ResponseWriter;Ljava/lang/String;)V at org.chartistjsf.component.chart.ChartRenderer.encodeScript(ChartRenderer.java:98) at org.chartistjsf.component.chart.ChartRenderer.encodeEnd(ChartRenderer.java:66) at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:920) at org.primefaces.renderkit.CoreRenderer.renderChild(CoreRenderer.java:88) at org.primefaces.renderkit.CoreRenderer.renderChildren(CoreRenderer.java:70) Truncated. see log file for complete stacktrace

Reason: Chart Renderer extends Core Renderer and it used inherited method startScript which does not exist any longer on Core Renderer version 8.0

Event itemSelect doesn't work

The event itemSelect doesn't work on Bar and Pie Chart

lower boundary ignored

Hi everyone,
It seems like the lower boundary is ignored - it should be reproducible using the following code.
The upper boundary works fine.

Backing Bean

lineChartModel = new LineChartModel();
lineChartModel.setAspectRatio(AspectRatio.DOUBLE_OCTAVE);
lineChartModel.setShowArea(true);
lineChartModel.setFullWidth(true);
lineChartModel.setLow(0);
lineChartModel.setHigh(100);
lineChartModel.setShowPoint(false);
        
Axis xAxis = lineChartModel.getAxis(AxisType.X);
xAxis.setShowLabel(false);

LineChartSeries cpuUsage = new LineChartSeries();
        
for (int i = 0; i < 21; i++) {
    lineChartModel.addLabel(i);
    cpuUsage.set(ThreadLocalRandom.current().nextInt(30, 50 + 1));
}

lineChartModel.addSeries(cpuUsage);

Screenshot

Possibility to use Dates in X-Axis

Hey, I just found this library yesterday and I am trying to determine if it will meet my needs. I need to be able to specify date values for my x-axis. So far, I am seeing that the x-axis is just hard set labels. Since my dates will vary wildly, and points won't always line up directly with the label, that won't work well. Is it hard to get dates or at least some sort of value instead of just a string value for the x-axis?

Incorrect artifactId in Maven dependency

Minor issue with Maven dependency mentioned at https://github.com/hatemalimam/ChartistJSF

<dependency>
    <groupId>org.chartistjsf</groupId>
    <artifactId>chartistjsf</artifactId>
    <version>0.9</version>      
</dependency>

The dependency above does not work, it should be:

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

Allow for specification of x and y values

Hi,

thank you very much for your awesome library. Is it possible to allow the specification of x and y variables in line charts (similar to primefaces)?

Thank you very much

Mostrar show label en LINE, BAR.

Como podría mostrar los datos en cada nodo, para ya no estar pasando el puntero del mouse.

Bugfix: Support thresholds for bar charts

Like mentioned in the documentation, threshold plugin should also work for bar charts. But currently plugins are only usable for line charts because of missing support for plugins in bar chart.

LineRenderer.java:

if (chart.getPlugins() != null) {
	writer.write(",plugins:" + chart.getPlugins());
}

BarRenderer.java:

No part for handling plugins.

Fix should be easy, just add the lines from LineRenderer.java to BarRenderer.java.

add referenceValue to BarChartModel

Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.

primefaces.js doesn't exist in PrimeFaces 6.0

Your library currently isn't compatible to PrimeFaces 6.0. The PrimeFaces team has split the primefaces.js into two smaller files:

@ResourceDependency(library="primefaces", name="core.js"), @ResourceDependency(library="primefaces", name="components.js")

Also see the PF 6.0 migration guide: https://github.com/primefaces/primefaces/wiki/Migration-Guide

add className on series

add className to ChartSeries, an example:

series: [ { name: 'Series Name', data: [ .... ], className: 'my-css-class' } ]

Metadata on series

Hi,
is it possible to easily integrate metadata on Chart Series point like shown here https://github.com/gionkunz/chartist-js/issues/151 ?

Thank you

Uncaught ReferenceError: ChartistJSF is not defined

Hello,

I'm using the last version of the build but I keep on getting the following error:
Uncaught ReferenceError: ChartistJSF is not defined

For some reason, the chartisjsf.js file is not added automatically. Any idea what could be causing this?

Thanks,
Bram

Possible to define colors of a series?

Hi,

thank you for the chart. Is it possible to change the color of a series?

FileNotFoundException

Im using primefaces 6
Springboot
Spring webflow** i think this is the problem

This ocourr when i put the library in the pom

Missing artifact org.chartistjsf:ChartistJSF:jar:3.0

Using:

<!-- https://mvnrepository.com/artifact/org.chartistjsf/ChartistJSF -->
<dependency>
    <groupId>org.chartistjsf</groupId>
    <artifactId>ChartistJSF</artifactId>
    <version>3.0</version>
</dependency>

In maven gives me a:

Description	Resource	Path	Location	Type
Missing artifact org.chartistjsf:ChartistJSF:jar:3.0	pom.xml	/ChartistJSF-Showcase-master	line 81	Maven Dependency Problem

(the version 2.1 is working fine on the same project)

For now I had to manually install with:

mvn install:install-file -Dfile=/Users/madx/Desktop/ChartistJSF-3.0.jar -DgroupId=org.chartistjsf -DartifactId=ChartistJSF -Dversion=3.0 -Dpackaging=jar

Support legend

Don't you think legend would be a nice feature to add to Chartist? Instead of using it as a plugin, Chartist could embed this dependency, that would involve adding a new attribute to ct:chart: legend="true|false"

See https://github.com/CodeYellowBV/chartist-plugin-legend

Question: Any way to not have primefaces as a dependency?

add onlyInteger to axisY

example:

  axisY: {
     // Use only integer values (whole numbers) for the scale steps
     onlyInteger: false
  }

http://chartistjsf.org offline

The http://chartistjsf.org website is offline for a few days now.