New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing moment.js dependency for Chart.js #4453

Closed
metaxmx opened this Issue Jan 21, 2019 · 2 comments

Comments

Projects
None yet
3 participants
@metaxmx
Copy link
Contributor

metaxmx commented Jan 21, 2019

The new "Chart.js" charts like <p:lineChart /> need the library moment.js (already included in PF) in order to display chart axes of type "time" (e.g. in order to display a timeline-ish chart).
Due to the include-mechanism of the chart.js sources, the moment namespace must be already defined in JavaScript when the chart.js file is included, it is not sufficient to add it afterwards, e.g. later in the <h:head /> section.

I am aware that this issue is currently only in PrimeFaces Elite, where the "Chart.js" feature is already rolled out, but you might want to get this fixed, before the release of PF 6.3.

1) Environment

  • PrimeFaces version: 6.2.14
  • Does it work on the newest released PrimeFaces version? Version? No
  • Does it work on the newest sources in GitHub? No
  • Application server + version: Tomcat 9.0.14
  • Affected browsers: Firefox, Chrome

2) Expected behavior

The Chart should display an x-Axis with date and time

3) Actual behavior

A JavaScript error is printed on the console:
Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com
The chart is not rendered.

4) Steps to reproduce

Create a simple <p:lineChart /> with an x-Axis of type "time". Do not include the moment.js manually before the general head section, and you get the error message described above.

If the moment.js in included before the <h:head /> secotion, or included as a component script before chart.js, the chart gets rendered correctly.

5) Sample XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xml:lang="de" lang="de">

<h:head>
	<title>Example Chart.js</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
	<p:lineChart model="#{myBean.chartModel}" />
</h:body>
</html>

6) Sample bean

package de.example.jsf;

import java.io.Serializable;
import java.util.List;

import javax.faces.view.ViewScoped;
import javax.inject.Named;

import org.primefaces.model.charts.ChartData;
import org.primefaces.model.charts.axes.cartesian.CartesianScales;
import org.primefaces.model.charts.axes.cartesian.linear.CartesianLinearAxes;
import org.primefaces.model.charts.line.LineChartDataSet;
import org.primefaces.model.charts.line.LineChartModel;
import org.primefaces.model.charts.line.LineChartOptions;

import com.google.common.collect.ImmutableList;

@Named
@ViewScoped
public class MyBean implements Serializable {

	private LineChartModel model = null;

	public LineChartModel getChartModel() {
		if (model == null) {
			ChartData cd = new ChartData();
			LineChartDataSet ds = new LineChartDataSet();
			ds.setData(ImmutableList.of(14, 53, 27));
			cd.addChartDataSet(ds);
			List<String> labels = ImmutableList
					.of("2019-01-02T12:00:00Z", "2019-01-03T12:00:00Z", "2019-01-04T12:00:00Z");
			cd.setLabels(labels);

			LineChartOptions options = new LineChartOptions();
			options.setScales(new CartesianScales());
			CartesianLinearAxes yAxis = new CartesianLinearAxes();
			options.getScales().addYAxesData(yAxis);
			CartesianLinearAxes xAxis = new CartesianLinearAxes();
			xAxis.setType("time");
			options.getScales().addXAxesData(xAxis);

			model = new LineChartModel(cd, options);
		}
		return model;
	}

}

@tandraschko tandraschko added the defect label Jan 21, 2019

@tandraschko

This comment has been minimized.

Copy link
Member

tandraschko commented Jan 21, 2019

A PR would be great

@metaxmx

This comment has been minimized.

Copy link
Contributor Author

metaxmx commented Jan 21, 2019

I created a pull request to fix the missing library for LineChart in the simplest way.
Time-like axes might be possible on other ChartJs based charts too, I haven't checked this.

tandraschko added a commit that referenced this issue Jan 21, 2019

@tandraschko tandraschko added this to the 7.0 milestone Jan 21, 2019

@mertsincan mertsincan added 6.2.15 and removed 6.2.15 labels Jan 23, 2019

@mertsincan mertsincan changed the title LineChart: Missing moment.js dependency for Chart.js Missing moment.js dependency for Chart.js Jan 23, 2019

mertsincan added a commit that referenced this issue Jan 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment