CODEWITHSUNDEEP
jsfprimefacescharts
a.atlam
a.atlam

Reputation: 742

p:chart Renders all charts as Linechart

I have a Java application with JSF using PrimeFaces 6.0 DeviceManager is a bean which contains a list of online and offline and blocked devices. Each device has 2 chart models in the class, Dial and Line. Here are the relevant code sections

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <title><ui:insert name="title">Title</ui:insert></title>
    <h:outputStylesheet library="css" name="primeui-all.min.css" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />
    <h:outputStylesheet library="css" name="jquery.jqplot.min.css" />
    <h:outputScript library="js" name="primeui-all.min.js" />
    <h:outputScript library="js" name="jquery.jqplot.min.js"/>
</h:head>



<p:dataTable id="OnlineDevices" var="device" value="#{DeviceManager.online}">
    <p:column headerText="Gauge Meter" class="col-md-4" >
            <p:panel>
                <p:chart type="metergauge" model="#{device.dial}" style="height:300px;"/>
            </p:panel>
    </p:column>
</p:dataTable>

This is the device class containing the Charts Model which was copied from the Primefaces showcase to eliminate any issues in the model

private MeterGaugeChartModel Dial;
public MeterGaugeChartModel getDial()
{
    Dial = initMeterGaugeModel();
    Dial.setTitle("Device Dial");
    Dial.setGaugeLabel("°C");
    Dial.setSeriesColors("66cc66,93b75f,E7E658,cc6666");
    Dial.setGaugeLabelPosition("bottom");
    Dial.setShowTickLabels(false);
    Dial.setLabelHeightAdjust(110);
    Dial.setIntervalOuterRadius(100);
    return Dial;

}

private MeterGaugeChartModel initMeterGaugeModel() 
{
    List<Number> intervals = new ArrayList<Number>()
    {   
        private static final long serialVersionUID = -311244463402628794L;

    {
        add(20);
        add(50);
        add(120);
        add(220);
    }};

    return new MeterGaugeChartModel(140, intervals);
}

Now this works, and plots, only all plots are rendered as empty line charts. Line charts work and plot correctly, but everything else is rendered as empty line plots. I used a polling form to update the chart data and using firebug checked on the data sent from the server, it says type metergauge. So why is it rendering (along with everything else) to line? Thanks alot guys and all suggestions are appreciated and welcomed.

Upvotes: 1

Views: 511

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

There is a conflict between all the auto included primefaces js (including jqplot for the charts) and the jqplot and primeui css and js you include manually. Remove that and it will just work.

Upvotes: 1

Related Questions