Code: Select all
<script type="text/javascript">
//<![CDATA[
function ordersChartExtender() {
var textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || 'rgba(0, 0, 0, 0.87)';
var gridLinesColor = getComputedStyle(document.body).getPropertyValue('--divider-color') || 'rgba(160, 167, 181, .3)';
var fontFamily = getComputedStyle(document.body).getPropertyValue('--font-family');
this.cfg.config.options = {
plugins: {
legend: {
display: true,
labels: {
fontFamily,
color: textColor
}
}
},
responsive: true,
scales: {
y: {
ticks: {
fontFamily,
color: textColor
},
grid: {
color: gridLinesColor
}
},
x: {
ticks: {
fontFamily,
color: textColor
},
grid: {
color: gridLinesColor
}
}
}
};
}
function overviewChartExtender(config) {
config.options.responsive = true;
config.options.scales = {
y: {
display: false
},
x: {
display: false
}
}
}
function overviewChartExtender1() {
var config = this.cfg.config;
overviewChartExtender(config);
var colors = getOverviewColors();
config.data.datasets[0].borderColor = colors.tealBorderColor;
config.data.datasets[0].backgroundColor = colors.tealBgColor;
}
function overviewChartExtender2() {
var config = this.cfg.config;
overviewChartExtender(config);
var colors = getOverviewColors();
config.data.datasets[0].borderColor = colors.tealBorderColor;
config.data.datasets[0].backgroundColor = colors.tealBgColor;
}
function overviewChartExtender3() {
var config = this.cfg.config;
overviewChartExtender(config);
var colors = getOverviewColors();
config.data.datasets[0].borderColor = colors.pinkBorderColor;
config.data.datasets[0].backgroundColor = colors.pinkBgColor;
}
function overviewChartExtender4() {
var config = this.cfg.config;
overviewChartExtender(config);
var colors = getOverviewColors();
config.data.datasets[0].borderColor = colors.tealBorderColor;
config.data.datasets[0].backgroundColor = colors.tealBgColor;
}
function getOverviewColors() {
var isLight = getComputedStyle(document.body).getPropertyValue('--layout-mode') !== 'dark';
return {
pinkBorderColor: isLight ? '#E91E63' : '#EC407A',
pinkBgColor: isLight ? '#F48FB1' : '#F8BBD0',
tealBorderColor: isLight ? '#009688' : '#26A69A',
tealBgColor: isLight ? '#80CBC4' : '#B2DFDB'
};
}
function chatContentScroll() {
var content = $('.chat-content')[0];
if (content) {
content.scroll({
top: content.scrollHeight
});
}
}
function onChatInputKeyPress(event) {
if (event.keyCode == 13) {
chatRC();
return false;
}
}
function onChatEmoji() {
PF('emojisOverlayPanelWidget').hide();
var input = $('.chat-input')[0];
input.focus();
input.setSelectionRange(input.value.length, input.value.length);
}
//]]>
</script>
Code: Select all
// dashboards.xhtml
<h:form id="dashboardForm">
// All charts in dashboard
</h:form>
Code: Select all
// DashboardView.java
public void createOrdersChart(List<String> labels) {
ordersChartModel = new LineChartModel();
ChartData data = new ChartData();
data.setLabels(labels);
LineChartDataSet dataSet1 = new LineChartDataSet();
List<Object> values1 = new ArrayList<>();
values1.add(31);
values1.add(83);
values1.add(69);
values1.add(29);
values1.add(62);
values1.add(25);
values1.add(59);
values1.add(26);
values1.add(46);
dataSet1.setData(values1);
dataSet1.setLabel("New Orders");
dataSet1.setFill(true);
dataSet1.setBackgroundColor("rgba(77, 208, 225, 0.8)");
dataSet1.setBorderWidth(2);
dataSet1.setBorderColor("#4DD0E1");
dataSet1.setTension(0.4);
data.addChartDataSet(dataSet1);
LineChartDataSet dataSet2 = new LineChartDataSet();
List<Object> values2 = new ArrayList<>();
values2.add(67);
values2.add(98);
values2.add(27);
values2.add(88);
values2.add(38);
values2.add(3);
values2.add(22);
values2.add(60);
values2.add(56);
dataSet2.setData(values2);
dataSet2.setLabel("Completed Orders");
dataSet2.setFill(true);
dataSet2.setBackgroundColor("rgba(63, 81, 181, 0.8)");
dataSet2.setBorderWidth(2);
dataSet2.setBorderColor("#3F51B5");
dataSet2.setTension(0.4);
data.addChartDataSet(dataSet2);
ordersChartModel.setData(data);
ordersChartModel.setExtender("ordersChartExtender");
}
public LineChartModel createOverviewChart(List<String> labels, List<Object> values) {
LineChartModel overviewChartModel = new LineChartModel();
ChartData data = new ChartData();
data.setLabels(labels);
LineChartDataSet dataSet = new LineChartDataSet();
dataSet.setData(values);
dataSet.setFill(true);
dataSet.setBackgroundColor("rgba(77, 208, 225, 0.8)");
dataSet.setBorderWidth(2);
dataSet.setBorderColor("#4DD0E1");
dataSet.setTension(0.4);
data.addChartDataSet(dataSet);
LineChartOptions options = new LineChartOptions();
Legend legend = new Legend();
legend.setDisplay(false);
options.setLegend(legend);
Tooltip tooltip = new Tooltip();
tooltip.setEnabled(false);
options.setTooltip(tooltip);
Elements elements = new Elements();
ElementsPoint point = new ElementsPoint();
point.setRadius(0);
elements.setPoint(point);
options.setElements(elements);
overviewChartModel.setOptions(options);
overviewChartModel.setData(data);
return overviewChartModel;
}
public void createOverviewChart1(List<String> labels) {
List<Object> values = new ArrayList<>();
values.add(50);
values.add(64);
values.add(32);
values.add(24);
values.add(18);
values.add(27);
values.add(20);
values.add(36);
values.add(30);
overviewChartModel1 = createOverviewChart(labels, values);
overviewChartModel1.setExtender("overviewChartExtender1");
}
public void createOverviewChart2(List<String> labels) {
List<Object> values = new ArrayList<>();
values.add(11);
values.add(30);
values.add(52);
values.add(35);
values.add(39);
values.add(20);
values.add(14);
values.add(18);
values.add(29);
overviewChartModel2 = createOverviewChart(labels, values);
overviewChartModel2.setExtender("overviewChartExtender2");
}
public void createOverviewChart3(List<String> labels) {
List<Object> values = new ArrayList<>();
values.add(20);
values.add(29);
values.add(39);
values.add(36);
values.add(45);
values.add(24);
values.add(28);
values.add(20);
values.add(15);
overviewChartModel3 = createOverviewChart(labels, values);
overviewChartModel3.setExtender("overviewChartExtender3");
}
public void createOverviewChart4(List<String> labels) {
List<Object> values = new ArrayList<>();
values.add(30);
values.add(39);
values.add(50);
values.add(21);
values.add(33);
values.add(18);
values.add(10);
values.add(24);
values.add(20);
overviewChartModel4 = createOverviewChart(labels, values);
overviewChartModel4.setExtender("overviewChartExtender4");
}
Code: Select all
// config.xhtml
<h:form id="layoutConfigForm">
<p:remoteCommand name="refreshChart" update="@(.ui-chart)" />
/* You can update all chart using remoteCommand when layout mode is changed */