	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Dashboard

Dashboard is a layout component featuring dragdrop based content reordering similar to portal environments. Responsive layout requires PrimeFlex CSS.

Dashboard Tag Documentation

Dashboard provides a portal like layout with drag-drop based reorder capabilities.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side component.
disabled	boolean	false	false	Disables the component.
model	DashboardModel	false		Dashboard model instance representing the layout of the UI.
reordering	boolean	false	true	Allow reordering of panels.
responsive	boolean	false	false	In responsive mode, PrimeFlex can be used to dynamically size columns and responsiveness.
scope	String	false	dashboard	Scope for dashboard drag and drop behaviour. Items can be dragged between multiple dashboards with the same scope.
style	String	false		Inline style of the dashboard container.
styleClass	String	false		Style class of the dashboard container.
var	String	false		Name of collection iterator which will be the value of DashboardWidget.getValue().

Name	Description
No records found.

Name	Type	Default	Description
reorder	DashboardReorderEvent	true	Fired when dashboard panels are reordered

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.Dashboard

Class org.primefaces.component.dashboard.Dashboard

Renderer Type org.primefaces.component.DashboardRenderer

Renderer Class org.primefaces.component.dashboard.DashboardRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

Responsive

Bar

Stacked

Doughnut

Cartesian

Legacy

Sports

Sports Content

Finance

Finance Content

Lifestyle

Lifestyle Content

Weather

Weather Content

Politics

Politics Content

Usage


<style>
.legacy .p-panel, .legacy.div.p-state-hover {
    margin: 10px;
}
.legacy .p-dashboard-column {
    width: 220px;
}
.p-dashboard-active {
    border-color: var(--primary-color);
    border-width: 3px !important;
    border-style: dashed;
}
.p-dashboard-hover {
    border-color: #C2E085;
    border-width: 3px !important;
    border-style: solid;
}
body .p-panel.chart-dashlet .p-panel-content .p-chart {
    height: 250px;
    max-height: 250px;
}
</style>

<h:form id="form">
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true">
        <p:autoUpdate />
    </p:growl>

    <div class="card">
        <h5 class="mt-0">Responsive</h5>
        <p:dashboard id="responsive" model="#{dashboardView.responsiveModel}" responsive="true">
            <p:ajax event="reorder" listener="#{dashboardView.handleReorder}" />

            <p:panel id="bar" header="Bar" closable="true" styleClass="chart-dashlet" >
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <f:facet name="options">
                    <p:menu>
                        <p:submenu label="Panel Size">
                            <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-4')}" immediate="true" update="@form">
                                1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-6')}" immediate="true" update="@form">
                                1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-8')}" immediate="true" update="@form">
                                2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-12')}" immediate="true" update="@form">
                                Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                            </p:menuitem>
                        </p:submenu>
                    </p:menu>
                </f:facet>
                
                <p:chart value="#{chartView.barModel}" style="width: 100%; height: 100%;" />
            </p:panel>

            <p:panel id="stacked" header="Stacked" closable="true" styleClass="chart-dashlet" >
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <f:facet name="options">
                    <p:menu>
                        <p:submenu label="Panel Size">
                            <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-4')}" immediate="true" update="@form">
                                1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-6')}" immediate="true" update="@form">
                                1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-8')}" immediate="true" update="@form">
                                2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-12')}" immediate="true" update="@form">
                                Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                            </p:menuitem>
                        </p:submenu>
                    </p:menu>
                </f:facet>
                <p:chart value="#{chartView.stackedBarModel}" style="width: 100%; height: 100%;" />
            </p:panel>

            <p:panel id="donut" header="Doughnut" closable="true" styleClass="chart-dashlet" >
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <f:facet name="options">
                    <p:menu>
                        <p:submenu label="Panel Size">
                            <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-4')}" immediate="true" update="@form">
                                1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-6')}" immediate="true" update="@form">
                                1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-8')}" immediate="true" update="@form">
                                2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-12')}" immediate="true" update="@form">
                                Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                            </p:menuitem>
                        </p:submenu>
                    </p:menu>
                </f:facet>

                <p:chart value="#{chartView.donutModel}" style="width: 100%; height: 100%;" />
            </p:panel>

            <p:panel id="cartesian" header="Cartesian" closable="true" styleClass="chart-dashlet" >
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <f:facet name="options">
                    <p:menu>
                        <p:submenu label="Panel Size">
                            <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-4')}" immediate="true" update="@form">
                                1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-6')}" immediate="true" update="@form">
                                1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-8')}" immediate="true" update="@form">
                                2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                            </p:menuitem>
                            <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-12')}" immediate="true" update="@form">
                                Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                            </p:menuitem>
                        </p:submenu>
                    </p:menu>
                </f:facet>

                <p:chart id="chartline" value="#{chartView.cartesianLinerModel}" style="width: 100%; height: 100%;" />
            </p:panel>
        </p:dashboard>
    </div>

    <div class="card">
        <h5 class="mt-0">Legacy</h5>
        <p:dashboard id="legacy" model="#{dashboardView.legacyModel}" styleClass="legacy">
            <p:ajax event="reorder" listener="#{dashboardView.handleReorder}" />

            <p:panel id="sports" header="Sports" closable="true" toggleable="true">
                <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <h:outputText value="Sports Content" />
            </p:panel>

            <p:panel id="finance" header="Finance" closable="true" toggleable="true">
                <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <h:outputText value="Finance Content" />
            </p:panel>

            <p:panel id="lifestyle" header="Lifestyle" closable="true" toggleable="true">
                <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <h:outputText value="Lifestyle Content" />
            </p:panel>

            <p:panel id="weather" header="Weather" closable="true" toggleable="true">
                <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <h:outputText value="Weather Content" />
            </p:panel>

            <p:panel id="politics" header="Politics" closable="true" toggleable="true">
                <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                <h:outputText value="Politics Content" />
            </p:panel>
        </p:dashboard>
        <div style="clear: both" />
    </div>
</h:form>


package org.primefaces.showcase.view.panel;

import org.primefaces.event.CloseEvent;
import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.event.ToggleEvent;
import org.primefaces.model.dashboard.DashboardModel;
import org.primefaces.model.dashboard.DashboardWidget;
import org.primefaces.model.dashboard.DefaultDashboardModel;
import org.primefaces.model.dashboard.DefaultDashboardWidget;

import java.io.Serial;
import java.io.Serializable;
import java.util.Arrays;

import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named
@ViewScoped
public class DashboardView implements Serializable {

    @Serial private static final long serialVersionUID = 1L;
    private static final String RESPONSIVE_CLASS = "col-12 lg:col-6 xl:col-6";

    private DashboardModel responsiveModel;
    private DashboardModel legacyModel;

    @PostConstruct
    public void init() {
        // responsive
        responsiveModel = new DefaultDashboardModel();
        responsiveModel.addWidget(new DefaultDashboardWidget("bar", RESPONSIVE_CLASS));
        responsiveModel.addWidget(new DefaultDashboardWidget("stacked", RESPONSIVE_CLASS));
        responsiveModel.addWidget(new DefaultDashboardWidget("donut", RESPONSIVE_CLASS.replaceFirst("xl:col-\\d+", "xl:col-4")));
        responsiveModel.addWidget(new DefaultDashboardWidget("cartesian", RESPONSIVE_CLASS.replaceFirst("xl:col-\\d+", "xl:col-8")));

        // legacy
        legacyModel = new DefaultDashboardModel();
        legacyModel.addWidget(new DefaultDashboardWidget(Arrays.asList("sports", "finance")));
        legacyModel.addWidget(new DefaultDashboardWidget(Arrays.asList("lifestyle", "weather")));
        legacyModel.addWidget(new DefaultDashboardWidget(Arrays.asList("politics")));
    }

    public void handleReorder(DashboardReorderEvent event) {
        FacesMessage message = new FacesMessage();
        message.setSeverity(FacesMessage.SEVERITY_INFO);
        message.setSummary("Reordered: " + event.getWidgetId());
        String result = String.format("Dragged index: %d, Dropped Index: %d, Widget Index: %d",
                event.getSenderColumnIndex(),  event.getColumnIndex(), event.getItemIndex());
        message.setDetail(result);

        addMessage(message);
    }

    public void handleClose(CloseEvent event) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Panel Closed",
                "Closed panel ID:'" + event.getComponent().getId() + "'");

        addMessage(message);
    }

    public void handleToggle(ToggleEvent event) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Panel Toggled",
                "Toggle panel ID:'" + event.getComponent().getId() + "' Status:" + event.getVisibility().name());

        addMessage(message);
    }

    /**
     * Dashboard panel has been resized.
     *
     * @param widget the DashboardPanel
     * @param size the new size CSS
     */
    public void onDashboardResize(final String widget, final String size) {
        final DashboardWidget dashboard = responsiveModel.getWidget(widget);
        if (dashboard != null) {
            final String newCss = dashboard.getStyleClass().replaceFirst("xl:col-\\d+", size);
            dashboard.setStyleClass(newCss);
        }
    }

    private void addMessage(FacesMessage message) {
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public DashboardModel getLegacyModel() {
        return legacyModel;
    }

    public DashboardModel getResponsiveModel() {
        return responsiveModel;
    }
}


package org.primefaces.showcase.view.chartjs;

import org.primefaces.event.ItemSelectEvent;

import java.io.Serial;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.List;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;

import software.xdev.chartjs.model.charts.BarChart;
import software.xdev.chartjs.model.charts.BubbleChart;
import software.xdev.chartjs.model.charts.DoughnutChart;
import software.xdev.chartjs.model.charts.LineChart;
import software.xdev.chartjs.model.charts.MixedChart;
import software.xdev.chartjs.model.charts.PieChart;
import software.xdev.chartjs.model.charts.PolarChart;
import software.xdev.chartjs.model.charts.RadarChart;
import software.xdev.chartjs.model.charts.ScatterChart;
import software.xdev.chartjs.model.color.RGBAColor;
import software.xdev.chartjs.model.data.BarData;
import software.xdev.chartjs.model.data.BubbleData;
import software.xdev.chartjs.model.data.DoughnutData;
import software.xdev.chartjs.model.data.LineData;
import software.xdev.chartjs.model.data.MixedData;
import software.xdev.chartjs.model.data.PieData;
import software.xdev.chartjs.model.data.PolarData;
import software.xdev.chartjs.model.data.RadarData;
import software.xdev.chartjs.model.data.ScatterData;
import software.xdev.chartjs.model.datapoint.BubbleDataPoint;
import software.xdev.chartjs.model.datapoint.ScatterDataPoint;
import software.xdev.chartjs.model.dataset.BarDataset;
import software.xdev.chartjs.model.dataset.BubbleDataset;
import software.xdev.chartjs.model.dataset.DoughnutDataset;
import software.xdev.chartjs.model.dataset.LineDataset;
import software.xdev.chartjs.model.dataset.PieDataset;
import software.xdev.chartjs.model.dataset.PolarDataset;
import software.xdev.chartjs.model.dataset.RadarDataset;
import software.xdev.chartjs.model.dataset.ScatterDataset;
import software.xdev.chartjs.model.enums.FontStyle;
import software.xdev.chartjs.model.enums.IndexAxis;
import software.xdev.chartjs.model.enums.ScalesPosition;
import software.xdev.chartjs.model.options.BarOptions;
import software.xdev.chartjs.model.options.DoughnutOptions;
import software.xdev.chartjs.model.options.Font;
import software.xdev.chartjs.model.options.LineOptions;
import software.xdev.chartjs.model.options.Options;
import software.xdev.chartjs.model.options.Plugins;
import software.xdev.chartjs.model.options.RadarOptions;
import software.xdev.chartjs.model.options.Title;
import software.xdev.chartjs.model.options.scale.Scales;
import software.xdev.chartjs.model.options.scale.cartesian.CartesianScaleOptions;
import software.xdev.chartjs.model.options.scale.cartesian.CartesianTickOptions;
import software.xdev.chartjs.model.options.scale.cartesian.linear.LinearScaleOptions;
import software.xdev.chartjs.model.options.scale.radial.AngleLines;
import software.xdev.chartjs.model.options.scale.radial.PointLabels;
import software.xdev.chartjs.model.options.scale.radial.RadialLinearScaleOptions;
import software.xdev.chartjs.model.options.scale.radial.RadialTickOptions;
import software.xdev.chartjs.model.options.tooltip.TooltipOptions;


@Named
@RequestScoped
public class ChartView implements Serializable {

    @Serial private static final long serialVersionUID = 1L;

    private String json;
    private String barModel;
    private String bubbleModel;
    private String cartesianLinerModel;
    private String donutModel;
    private String lineModel;
    private String pieModel;
    private String polarAreaModel;
    private String radarModel;
    private String scatterModel;
    private String stackedBarModel;
    private String mixedModel;

    @PostConstruct
    public void init() {
        createBarModel();
        createBubbleModel();
        createCartesianLinerModel();
        createDonutModel();
        createJsonModel();
        createLineModel();
        createMixedModel();
        createPieModel();
        createPolarAreaModel();
        createRadarModel();
        createScatterModel();
        createStackedBarModel();
    }

    private void createPieModel() {
        pieModel = new PieChart()
                .setData(new PieData()
                .addDataset(new PieDataset()
                        .setData(BigDecimal.valueOf(300), BigDecimal.valueOf(50), BigDecimal.valueOf(100))
                        .setLabel("My First Dataset")
                        .addBackgroundColors(new RGBAColor(255, 99, 132), new RGBAColor(54, 162, 235), new RGBAColor(255, 205, 86))
                )
                .setLabels("Red", "Blue", "Yellow"))
                .toJson();
    }

    private void createPolarAreaModel() {
        polarAreaModel = new PolarChart()
                .setData(new PolarData()
                .addDataset(new PolarDataset()
                        .setData(BigDecimal.valueOf(11),
                                BigDecimal.valueOf(16),
                                BigDecimal.valueOf(7),
                                BigDecimal.valueOf(3),
                                BigDecimal.valueOf(14))
                        .setLabel("My First Dataset")
                        .addBackgroundColors(
                                new RGBAColor(255, 99, 132),
                                new RGBAColor(75, 192, 192),
                                new RGBAColor(255, 205, 86),
                                new RGBAColor(201, 203, 207),
                                new RGBAColor(54, 162, 235)
                        )
                )
                .setLabels("Red", "Green", "Yellow", "Grey", "Blue" ))
                .toJson();
    }

    public void createLineModel() {
        lineModel = new LineChart()
                .setData(new LineData()
                .addDataset(new LineDataset()
                        .setData(65, 59, 80, 81, 56, 55, 40)
                        .setLabel("My First Dataset")
                        .setBorderColor(new RGBAColor(75, 192, 192))
                        .setLineTension(0.1f)
                        .setFill(Boolean.FALSE))
                .setLabels("January", "February", "March", "April", "May", "June", "July"))
                .setOptions(new LineOptions()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setPlugins(new Plugins()
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Line Chart Subtitle")))
                ).toJson();
    }

    public void createScatterModel() {
        scatterModel = new ScatterChart()
                .setData(new ScatterData()
                .addDataset(new ScatterDataset()
                        .addData(new ScatterDataPoint(-10, 0))
                        .addData(new ScatterDataPoint(0, 10))
                        .addData(new ScatterDataPoint(10, 5))
                        .addData(new ScatterDataPoint(8, 14))
                        .addData(new ScatterDataPoint(12, 2))
                        .addData(new ScatterDataPoint(13, 7))
                        .addData(new ScatterDataPoint(6, 9))
                        .setLabel("Red Dataset")
                        .setBorderColor(new RGBAColor(249, 24, 24))
                        .setShowLine(Boolean.FALSE)
                        .setFill(Boolean.TRUE))
                )
                .setOptions(new LineOptions()
                        .setResponsive(true)
                        .setShowLine(Boolean.FALSE)
                        .setScales(new Scales()
                                .addScale(Scales.ScaleAxis.X, new LinearScaleOptions().setPosition(ScalesPosition.BOTTOM)))
                        .setPlugins(new Plugins()
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Scatter Chart")))
                ).toJson();
    }

    public void createCartesianLinerModel() {
        cartesianLinerModel = new LineChart()
                .setData(new LineData()
                .addDataset(new LineDataset()
                        .setData(20, 50, 100, 75, 25, 0)
                        .setLabel("Left Dataset")
                        .setLineTension(0.5f)
                        .setYAxisID("left-y-axis")
                        .setFill(Boolean.TRUE))
                .addDataset(new LineDataset()
                        .setData(0.1, 0.5, 1.0, 2.0, 1.5, 0)
                        .setLabel("Right Dataset")
                        .setLineTension(0.5f)
                        .setYAxisID("right-y-axis")
                        .setFill(Boolean.TRUE))
                .setLabels("Jan", "Feb", "Mar", "Apr", "May", "Jun"))
                .setOptions(new LineOptions()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setScales(new Scales()
                                .addScale("left-y-axis", new LinearScaleOptions().setPosition(ScalesPosition.LEFT))
                                .addScale("right-y-axis", new LinearScaleOptions().setPosition(ScalesPosition.RIGHT)))
                        .setPlugins(new Plugins()
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Cartesian Linear Chart")))
                ).toJson();
    }



    public void createBarModel() {
        barModel = new BarChart()
                .setData(new BarData()
                .addDataset(new BarDataset()
                        .setData(65, 59, 80, 81, 56, 55, 40)
                        .setLabel("My First Dataset")
                        .setBackgroundColor(new RGBAColor(255, 99, 132, 0.2))
                        .setBorderColor(new RGBAColor(255, 99, 132))
                        .setBorderWidth(1))
                .addDataset(new BarDataset()
                        .setData(85, 69, 20, 51, 76, 75, 10)
                        .setLabel("My Second Dataset")
                        .setBackgroundColor(new RGBAColor(255, 159, 64, 0.2))
                        .setBorderColor(new RGBAColor(255, 159, 64))
                        .setBorderWidth(1)
                )
                .setLabels("January", "February", "March", "April", "May", "June", "July"))
                .setOptions(new BarOptions()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setIndexAxis(IndexAxis.X)
                        .setScales(new Scales().addScale(Scales.ScaleAxis.Y, new CartesianScaleOptions()
                                .setStacked(false)
                                .setTicks(new CartesianTickOptions()
                                        .setAutoSkip(true)
                                        .setMirror(true)))
                        )
                        .setPlugins(new Plugins()
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Bar Chart using XDEV java model")))
                ).toJson();
    }

    public void createStackedBarModel() {
        stackedBarModel = new BarChart()
                .setData(new BarData()
                .addDataset(new BarDataset()
                        .setData(62, -58, -49, 25, 4, 77, -41)
                        .setLabel("Dataset 1")
                        .setBackgroundColor(new RGBAColor(255, 99, 132)))
                .addDataset(new BarDataset()
                        .setData(-1, 32, -52, 11, 97, 76, -78)
                        .setLabel("Dataset 2")
                        .setBackgroundColor(new RGBAColor(54, 162, 235)))
                .addDataset(new BarDataset()
                        .setData(-44, 25, 15, 92, 80, -25, -11)
                        .setLabel("Dataset 3")
                        .setBackgroundColor(new RGBAColor(75, 192, 192)))
                .setLabels("January", "February", "March", "April", "May", "June", "July"))
                .setOptions(new BarOptions()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setScales(new Scales()
                                .addScale(Scales.ScaleAxis.X, new CartesianScaleOptions()
                                        .setStacked(true)
                                        .setTicks(new CartesianTickOptions()))
                                .addScale(Scales.ScaleAxis.Y, new CartesianScaleOptions()
                                        .setStacked(true)
                                        .setTicks(new CartesianTickOptions()))
                        )
                        .setPlugins(new Plugins()
                                .setTooltip(new TooltipOptions().setMode("index"))
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Bar Chart - Stacked")))
                ).toJson();
    }

    public void createRadarModel() {
        radarModel = new RadarChart()
                .setData(new RadarData()
                .addDataset(new RadarDataset()
                        .setData(BigDecimal.valueOf(2.2),
                                BigDecimal.valueOf(3),
                                BigDecimal.valueOf(2.4),
                                BigDecimal.valueOf(1.1),
                                BigDecimal.valueOf(3))
                        .setLabel("P.Practitioner")
                        .setLineTension(0.1f)
                        .setBackgroundColor(new RGBAColor(102, 153, 204, 0.2))
                        .setBorderColor(new RGBAColor(102, 153, 204, 1))
                        .setPointBackgroundColor(List.of(new RGBAColor(102, 153, 204, 1)))
                        .setPointBorderColor(List.of(RGBAColor.WHITE))
                        .setPointHoverRadius(List.of(5))
                        .setPointHoverBackgroundColor(List.of(RGBAColor.WHITE))
                        .setPointHoverBorderColor(List.of(new RGBAColor(102, 153, 204, 1))))
                .addDataset(new RadarDataset()
                        .setData(BigDecimal.valueOf(2.1),
                                BigDecimal.valueOf(3),
                                BigDecimal.valueOf(3),
                                BigDecimal.valueOf(2.7),
                                BigDecimal.valueOf(3))
                        .setLabel("P.Manager")
                        .setLineTension(0.1f)
                        .setBackgroundColor(new RGBAColor(255, 204, 102, 0.2))
                        .setBorderColor(new RGBAColor(255, 204, 102, 1))
                        .setPointBackgroundColor(List.of(new RGBAColor(255, 204, 102, 1)))
                        .setPointBorderColor(List.of(RGBAColor.WHITE))
                        .setPointHoverRadius(List.of(5))
                        .setPointHoverBackgroundColor(List.of(RGBAColor.WHITE))
                        .setPointHoverBorderColor(List.of(new RGBAColor(255, 204, 102, 1))))
                .setLabels("Process Excellence", "Problem Solving", "Facilitation", "Project Mgmt", "Change Mgmt"))
                .setOptions(new RadarOptions()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setScales(new Scales().addScale(Scales.ScaleAxis.Y, new RadialLinearScaleOptions()
                                .setAngleLines(new AngleLines()
                                        .setDisplay(Boolean.TRUE)
                                        .setLineWidth(BigDecimal.valueOf(0.5))
                                        .setColor(new RGBAColor(128, 128, 128, 0.2)))
                                .setPointLabels(new PointLabels().setFont(new Font()
                                        .setSize(BigDecimal.valueOf(14))
                                        .setStyle(FontStyle.NORMAL)
                                        .setFamily("Lato, sans-serif"))
                                        .setColor(new RGBAColor(204, 204, 204, 1)))
                                .setTicks(new RadialTickOptions()
                                        .setDisplay(false)
                                        .setStepSize(BigDecimal.valueOf(0.2))
                                        .setMaxTickLimits(BigDecimal.valueOf(3))))
                        )
                        .setPlugins(new Plugins()
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Radar Chart")))
                ).toJson();

    }

    public void createBubbleModel() {
        bubbleModel = new BubbleChart()
                .setData(new BubbleData()
                .addDataset(new BubbleDataset()
                        .addData(new BubbleDataPoint(BigDecimal.valueOf(20), BigDecimal.valueOf(30), BigDecimal.valueOf(15)))
                        .addData(new BubbleDataPoint(BigDecimal.valueOf(40), BigDecimal.valueOf(10), BigDecimal.valueOf(10)))
                        .setLabel("My First Dataset")
                        .setBackgroundColor(new RGBAColor(255, 99, 132))
                        .setBorderColor(new RGBAColor(255, 99, 132))
                )).toJson();
    }

    public void createDonutModel() {
        donutModel = new DoughnutChart()
                .setData(new DoughnutData()
                .addDataset(new DoughnutDataset()
                        .setData(BigDecimal.valueOf(300),
                                BigDecimal.valueOf(50),
                                BigDecimal.valueOf(100))
                        .addBackgroundColors(
                                new RGBAColor(255, 99, 132),
                                new RGBAColor(54, 162, 235),
                                new RGBAColor(255, 205, 86))
                )
                .setLabels("Red", "Blue", "Yellow"))
                .setOptions(new DoughnutOptions().setMaintainAspectRatio(Boolean.FALSE))
                .toJson();
    }

    public void createMixedModel() {
        MixedData mixedData = new MixedData();

        BarDataset barDataset = new BarDataset()
                .setType("bar")
                .setData(120, 113, 175, 143, 118, 159, 110)
                .setLabel("Bar data")
                .setBorderColor(new RGBAColor(255, 99, 132, 1.0))
                .setBackgroundColor(new RGBAColor(255, 99, 132, 0.5))
                .setBorderWidth(1);

        LineDataset lineDataset = new LineDataset()
                .setType("line")
                .setData(119, 144, 179, 165, 195, 170, 135)
                .setLabel("Line data")
                .setStepped(true)
                .setBorderColor(new RGBAColor(75, 192, 192, 1.0))
                .setBackgroundColor(new RGBAColor(75, 192, 192, 0.5))
                .setLineTension(0.1f)
                .setFill(Boolean.FALSE);

        mixedData.addDataset(barDataset);
        mixedData.addDataset(lineDataset);

        mixedData.setLabels("January", "February", "March", "April", "May", "June", "July");

        mixedModel = new MixedChart()
                .setData(mixedData)
                .setOptions(new Options<>()
                        .setResponsive(true)
                        .setMaintainAspectRatio(false)
                        .setPlugins(new Plugins()
                                .setTooltip(new TooltipOptions().setMode("index"))
                                .setTitle(new Title()
                                        .setDisplay(true)
                                        .setText("Mixed Chart")
                                )
                        )
                ).toJson();
    }

    public void createJsonModel() {
        json = "{\r\n"
                + "   \"type\":\"line\",\r\n"
                + "   \"data\":{\r\n"
                + "      \"datasets\":[\r\n"
                + "         {\r\n"
                + "            \"backgroundColor\":\"rgba(40, 180, 99, 0.3)\",\r\n"
                + "            \"borderColor\":\"rgb(40, 180, 99)\",\r\n"
                + "            \"borderWidth\":1,\r\n"
                + "            \"data\":[\r\n"
                + "               {\r\n"
                + "                  \"x\":1699457269877,\r\n"
                + "                  \"y\":20\r\n"
                + "               },\r\n"
                + "               {\r\n"
                + "                  \"x\":1700047109694,\r\n"
                + "                  \"y\":20\r\n"
                + "               }\r\n"
                + "            ],\r\n"
                + "            \"hidden\":false,\r\n"
                + "            \"label\":\"Device Id: 524967 Register: A - total Wh \",\r\n"
                + "            \"minBarLength\":3\r\n"
                + "         },\r\n"
                + "         {\r\n"
                + "            \"backgroundColor\":\"rgba(218, 117, 255, 0.3)\",\r\n"
                + "            \"borderColor\":\"rgb(218, 117, 255)\",\r\n"
                + "            \"borderWidth\":1,\r\n"
                + "            \"data\":[\r\n"
                + "               {\r\n"
                + "                  \"x\":1699457267847,\r\n"
                + "                  \"y\":10\r\n"
                + "               },\r\n"
                + "               {\r\n"
                + "                  \"x\":1700047108397,\r\n"
                + "                  \"y\":234\r\n"
                + "               }\r\n"
                + "            ],\r\n"
                + "            \"hidden\":false,\r\n"
                + "            \"label\":\"Device Id: 524967 Register: A+ total Wh \",\r\n"
                + "            \"minBarLength\":3\r\n"
                + "         }\r\n"
                + "      ]\r\n"
                + "   },\r\n"
                + "   \"options\":{\r\n"
                + "      \"plugins\":{\r\n"
                + "         \"legend\":{\r\n"
                + "            \"display\":true,\r\n"
                + "            \"fullWidth\":true,\r\n"
                + "            \"position\":\"top\",\r\n"
                + "            \"reverse\":false,\r\n"
                + "            \"rtl\":false\r\n"
                + "         },\r\n"
                + "         \"title\":{\r\n"
                + "            \"display\":true,\r\n"
                + "            \"text\":\"Values from the meter\"\r\n"
                + "         },\r\n"
                + "         \"zoom\":{\r\n"
                + "            \"pan\":{\r\n"
                + "               \"enabled\":true,\r\n"
                + "               \"mode\":\"xy\",\r\n"
                + "               \"threshold\":5\r\n"
                + "            },\r\n"
                + "            \"zoom\":{\r\n"
                + "               \"wheel\":{\r\n"
                + "                  \"enabled\":true\r\n"
                + "               },\r\n"
                + "               \"pinch\":{\r\n"
                + "                  \"enabled\":true\r\n"
                + "               },\r\n"
                + "               \"mode\":\"xy\"\r\n"
                + "            }\r\n"
                + "         }\r\n"
                + "      },\r\n"
                + "      \"scales\":{\r\n"
                + "         \"x\":{\r\n"
                + "            \"beginAtZero\":false,\r\n"
                + "            \"offset\":true,\r\n"
                + "            \"reverse\":false,\r\n"
                + "            \"stacked\":true,\r\n"
                + "            \"ticks\":{\r\n"
                + "               \"autoSkip\":true,\r\n"
                + "               \"maxRotation\":0,\r\n"
                + "               \"minRotation\":0,\r\n"
                + "               \"mirror\":false,\r\n"
                + "               \"source\":\"data\"\r\n"
                + "            },\r\n"
                + "            \"time\":{\r\n"
                + "               \"displayFormats\":{\r\n"
                + "                  \"minute\":\"dd.LL T\"\r\n"
                + "               },\r\n"
                + "               \"round\":\"minute\",\r\n"
                + "               \"stepSize\":\"60\",\r\n"
                + "               \"unit\":\"minute\"\r\n"
                + "            },\r\n"
                + "            \"type\":\"time\"\r\n"
                + "         },\r\n"
                + "         \"y\":{\r\n"
                + "            \"beginAtZero\":false,\r\n"
                + "            \"offset\":false,\r\n"
                + "            \"reverse\":false,\r\n"
                + "            \"stacked\":true,\r\n"
                + "            \"ticks\":{\r\n"
                + "               \"autoSkip\":true,\r\n"
                + "               \"mirror\":false\r\n"
                + "            }\r\n"
                + "         }\r\n"
                + "      },\r\n"
                + "      \"showLine\":true,\r\n"
                + "      \"spanGaps\":false\r\n"
                + "   }\r\n"
                + "}";
    }

    public void itemSelect(ItemSelectEvent event) {
        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected",
                "Value: " + event.getData()
                + ", Item Index: " + event.getItemIndex()
                + ", DataSet Index:" + event.getDataSetIndex());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String getPieModel() {
        return pieModel;
    }

    public void setPieModel(String pieModel) {
        this.pieModel = pieModel;
    }

    public String getPolarAreaModel() {
        return polarAreaModel;
    }

    public void setPolarAreaModel(String polarAreaModel) {
        this.polarAreaModel = polarAreaModel;
    }

    public String getLineModel() {
        return lineModel;
    }

    public void setLineModel(String lineModel) {
        this.lineModel = lineModel;
    }

    public String getCartesianLinerModel() {
        return cartesianLinerModel;
    }

    public void setCartesianLinerModel(String cartesianLinerModel) {
        this.cartesianLinerModel = cartesianLinerModel;
    }

    public String getBarModel() {
        return barModel;
    }

    public void setBarModel(String barModel) {
        this.barModel = barModel;
    }

    public String getStackedBarModel() {
        return stackedBarModel;
    }

    public void setStackedBarModel(String stackedBarModel) {
        this.stackedBarModel = stackedBarModel;
    }

    public String getRadarModel() {
        return radarModel;
    }

    public void setRadarModel(String radarModel) {
        this.radarModel = radarModel;
    }

    public String getBubbleModel() {
        return bubbleModel;
    }

    public void setBubbleModel(String bubbleModel) {
        this.bubbleModel = bubbleModel;
    }

    public String getDonutModel() {
        return donutModel;
    }

    public void setDonutModel(String donutModel) {
        this.donutModel = donutModel;
    }

    public String getScatterModel() {
        return scatterModel;
    }

    public void setScatterModel(String scatterModel) {
        this.scatterModel = scatterModel;
    }

    public String getMixedModel() {
        return mixedModel;
    }

    public void setMixedModel(String mixedModel) {
        this.mixedModel = mixedModel;
    }

    public String getJson() {
        return json;
    }

    public void setJson(String json) {
        this.json = json;
    }
}

Dashboard

Dashboard Tag Documentation

Responsive

Panel Size

Panel Size

Panel Size

Panel Size

Legacy

Usage

Reloading page