Hi,
I'm using primefaces 5.0 with volt theme, Chart does not look awesome. I want to awesome chart like as in volt theme chart demo.
How can I do it. Please help.
Chart does not look awesome as volt demo
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You need to use JS function with setExtender("yourCustomMethod"). You can override charts in this custom JS method. Please see the following codes;
Volt Chart Demos;
ChartDemoView.java
test.xhtml
Volt Chart Demos;
ChartDemoView.java
Code: Select all
/*
* Copyright 2009-2016 PrimeTek.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.primefaces.volt.view;
import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.ItemSelectEvent;
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.BarChartSeries;
import org.primefaces.model.chart.BubbleChartModel;
import org.primefaces.model.chart.BubbleChartSeries;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.CategoryAxis;
import org.primefaces.model.chart.ChartSeries;
import org.primefaces.model.chart.DateAxis;
import org.primefaces.model.chart.DonutChartModel;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
import org.primefaces.model.chart.LinearAxis;
import org.primefaces.model.chart.PieChartModel;
@ManagedBean(name = "chartDemoView")
public class ChartDemoView implements Serializable {
private LineChartModel lineModel1;
private CartesianChartModel combinedModel;
private LineChartModel areaModel;
private BarChartModel barModel;
private PieChartModel pieModel1;
private DonutChartModel donutModel1;
private BubbleChartModel bubbleModel1;
private LineChartModel multiAxisModel;
private LineChartModel dateModel;
@PostConstruct
public void init() {
createLineModels();
createAreaModel();
createPieModels();
createDonutModels();
createBubbleModels();
createBarModels();
createCombinedModel();
createMultiAxisModel();
createDateModel();
}
public void itemSelect(ItemSelectEvent event) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected",
"Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public LineChartModel getLineModel1() {
return lineModel1;
}
public CartesianChartModel getCombinedModel() {
return combinedModel;
}
public CartesianChartModel getAreaModel() {
return areaModel;
}
public PieChartModel getPieModel1() {
return pieModel1;
}
public DonutChartModel getDonutModel1() {
return donutModel1;
}
public BubbleChartModel getBubbleModel1() {
return bubbleModel1;
}
public BarChartModel getBarModel() {
return barModel;
}
public LineChartModel getMultiAxisModel() {
return multiAxisModel;
}
public LineChartModel getDateModel() {
return dateModel;
}
private LineChartModel initCategoryModel() {
LineChartModel model = new LineChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 90);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
private void createLineModels() {
lineModel1 = initLinearModel();
lineModel1.setTitle("Linear Chart");
lineModel1.setLegendPosition("e");
Axis yAxis = lineModel1.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(10);
lineModel1.setExtender("skinChart");
}
private void createAreaModel() {
areaModel = new LineChartModel();
LineChartSeries boys = new LineChartSeries();
boys.setFill(true);
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
LineChartSeries girls = new LineChartSeries();
girls.setFill(true);
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 90);
girls.set("2008", 120);
areaModel.addSeries(boys);
areaModel.addSeries(girls);
areaModel.setTitle("Area Chart");
areaModel.setLegendPosition("ne");
areaModel.setStacked(true);
areaModel.setShowPointLabels(true);
Axis xAxis = new CategoryAxis("Years");
areaModel.getAxes().put(AxisType.X, xAxis);
Axis yAxis = areaModel.getAxis(AxisType.Y);
yAxis.setLabel("Births");
yAxis.setMin(0);
yAxis.setMax(300);
areaModel.setExtender("skinArea");
}
private BarChartModel initBarModel() {
BarChartModel model = new BarChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
private void createBarModels() {
createBarModel();
}
private void createBarModel() {
barModel = initBarModel();
barModel.setTitle("Bar Chart");
barModel.setLegendPosition("ne");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("Gender");
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("Births");
yAxis.setMin(0);
yAxis.setMax(200);
barModel.setExtender("skinBar");
}
private void createCombinedModel() {
combinedModel = new BarChartModel();
BarChartSeries boys = new BarChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
LineChartSeries girls = new LineChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
combinedModel.addSeries(boys);
combinedModel.addSeries(girls);
combinedModel.setTitle("Bar and Line");
combinedModel.setLegendPosition("ne");
combinedModel.setMouseoverHighlight(false);
combinedModel.setShowDatatip(false);
combinedModel.setShowPointLabels(true);
Axis yAxis = combinedModel.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(200);
combinedModel.setExtender("skinBarAndLine");
}
private void createMultiAxisModel() {
multiAxisModel = new LineChartModel();
BarChartSeries boys = new BarChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
LineChartSeries girls = new LineChartSeries();
girls.setLabel("Girls");
girls.setXaxis(AxisType.X2);
girls.setYaxis(AxisType.Y2);
girls.set("A", 52);
girls.set("B", 60);
girls.set("C", 110);
girls.set("D", 135);
girls.set("E", 120);
multiAxisModel.addSeries(boys);
multiAxisModel.addSeries(girls);
multiAxisModel.setTitle("Multi Axis Chart");
multiAxisModel.setMouseoverHighlight(false);
multiAxisModel.getAxes().put(AxisType.X, new CategoryAxis("Years"));
multiAxisModel.getAxes().put(AxisType.X2, new CategoryAxis("Period"));
Axis yAxis = multiAxisModel.getAxis(AxisType.Y);
yAxis.setLabel("Birth");
yAxis.setMin(0);
yAxis.setMax(200);
Axis y2Axis = new LinearAxis("Number");
y2Axis.setMin(0);
y2Axis.setMax(200);
multiAxisModel.getAxes().put(AxisType.Y2, y2Axis);
multiAxisModel.setExtender("skinMultiAxis");
}
private void createBubbleModels() {
bubbleModel1 = initBubbleModel();
bubbleModel1.setTitle("Bubble Chart");
bubbleModel1.getAxis(AxisType.X).setLabel("Price");
Axis yAxis = bubbleModel1.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(250);
yAxis.setLabel("Labels");
bubbleModel1.setExtender("skinBubble");
}
private BubbleChartModel initBubbleModel() {
BubbleChartModel model = new BubbleChartModel();
model.add(new BubbleChartSeries("Acura", 70, 183, 55));
model.add(new BubbleChartSeries("Alfa Romeo", 45, 92, 36));
model.add(new BubbleChartSeries("AM General", 24, 104, 40));
model.add(new BubbleChartSeries("Bugatti", 50, 123, 60));
model.add(new BubbleChartSeries("BMW", 15, 89, 25));
model.add(new BubbleChartSeries("Audi", 40, 180, 80));
model.add(new BubbleChartSeries("Aston Martin", 70, 70, 48));
return model;
}
private LineChartModel initLinearModel() {
LineChartModel model = new LineChartModel();
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set(1, 2);
series1.set(2, 1);
series1.set(3, 3);
series1.set(4, 6);
series1.set(5, 8);
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Series 2");
series2.set(1, 6);
series2.set(2, 3);
series2.set(3, 2);
series2.set(4, 7);
series2.set(5, 9);
model.addSeries(series1);
model.addSeries(series2);
return model;
}
private void createPieModels() {
createPieModel1();
}
private void createPieModel1() {
pieModel1 = new PieChartModel();
pieModel1.set("Brand 1", 540);
pieModel1.set("Brand 2", 325);
pieModel1.set("Brand 3", 702);
pieModel1.set("Brand 4", 421);
pieModel1.setTitle("Simple Pie");
pieModel1.setLegendPosition("w");
pieModel1.setExtender("skinPie");
}
private void createDonutModels() {
donutModel1 = initDonutModel();
donutModel1.setTitle("Donut Chart");
donutModel1.setLegendPosition("w");
donutModel1.setExtender("skinDonut");
}
private DonutChartModel initDonutModel() {
DonutChartModel model = new DonutChartModel();
Map<String, Number> circle1 = new LinkedHashMap<String, Number>();
circle1.put("Brand 1", 150);
circle1.put("Brand 2", 400);
circle1.put("Brand 3", 200);
circle1.put("Brand 4", 10);
model.addCircle(circle1);
Map<String, Number> circle2 = new LinkedHashMap<String, Number>();
circle2.put("Brand 1", 540);
circle2.put("Brand 2", 125);
circle2.put("Brand 3", 702);
circle2.put("Brand 4", 421);
model.addCircle(circle2);
Map<String, Number> circle3 = new LinkedHashMap<String, Number>();
circle3.put("Brand 1", 40);
circle3.put("Brand 2", 325);
circle3.put("Brand 3", 402);
circle3.put("Brand 4", 421);
model.addCircle(circle3);
return model;
}
private void createDateModel() {
dateModel = new LineChartModel();
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set("2014-01-01", 51);
series1.set("2014-01-06", 22);
series1.set("2014-01-12", 65);
series1.set("2014-01-18", 74);
series1.set("2014-01-24", 24);
series1.set("2014-01-30", 51);
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Series 2");
series2.set("2014-01-01", 32);
series2.set("2014-01-06", 73);
series2.set("2014-01-12", 24);
series2.set("2014-01-18", 12);
series2.set("2014-01-24", 74);
series2.set("2014-01-30", 62);
dateModel.addSeries(series1);
dateModel.addSeries(series2);
dateModel.setTitle("Zoom for Details");
dateModel.setZoom(true);
dateModel.getAxis(AxisType.Y).setLabel("Values");
DateAxis axis = new DateAxis("Dates");
axis.setTickAngle(-50);
axis.setMax("2014-02-01");
axis.setTickFormat("%b %#d, %y");
dateModel.getAxes().put(AxisType.X, axis);
dateModel.setExtender("skinZoom");
}
}
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script type="text/javascript">
// Blue : #3E98D3 | Red : #EF3F61 | Green : #2BB673 | Orange : #F15732
function skinChart() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinBar() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinArea() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#EF3F61', '#2BB673'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinBubble() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BubbleRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinZoom() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinPie() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77',
}
};
this.cfg.seriesDefaults = {
renderer: $.jqplot.PieRenderer,
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinDonut() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77',
}
};
this.cfg.seriesDefaults = {
renderer: $.jqplot.DonutRenderer,
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinBarAndLine() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#3E98D3', '#EF3F61'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 5,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
function skinMeterGauge() {
this.cfg.title = '';
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 5,
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
shadow: false,
min: 100,
max: 800,
intervals: [200, 300, 400, 500, 600, 700, 800],
intervalColors: ['#3E98D3', '#EF3F61', '#2BB673', '#F15732', '#3E98D3', '#EF3F61', '#2BB673']
}
}
}
function skinMultiAxis() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.seriesColors = ['#2BB673', '#F15732'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
renderer: $.jqplot.BarRenderer,
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
</script>
<style type="text/css">
.jqplot-target, .jqplot-axis {
color: #546E7A;
}
</style>
</h:head>
<h:body>
<div style="width:50%; float:left; ">
<p:chart id="line" type="line" model="#{chartDemoView.lineModel1}" responsive="true"/>
</div>
<div style="width:50%; float:left; ">
<p:chart id="bar" type="bar" model="#{chartDemoView.barModel}" responsive="true"/>
</div>
<div style="width:50%; float:left; ">
<p:chart id="bubble" type="bubble" model="#{chartDemoView.bubbleModel1}" responsive="true"/>
</div>
<div style="width:50%; float:left; ">
<p:chart id="pie" type="pie" model="#{chartDemoView.pieModel1}" responsive="true" />
</div>
<div style="width:50%; float:left; ">
<p:chart id="date" type="line" model="#{chartDemoView.dateModel}" responsive="true"/>
</div>
<div style="width:50%; float:left; ">
<p:chart id="donut" type="donut" model="#{chartDemoView.donutModel1}" responsive="true" />
</div>
<div style="width:50%; float:left; ">
<p:chart id="combined" type="bar" model="#{chartDemoView.combinedModel}" responsive="true" />
</div>
<div style="width:50%; float:left; ">
<p:chart id="multiAxis" type="line" model="#{chartDemoView.multiAxisModel}" responsive="true"/>
</div>
</h:body>
</html>
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 14 guests