I am building a Web Application Response Monitoring.This will monitor the response time of various web applications.For visual representation of this responses I will use a line chart that will depict the performance of various websites in terms of responses.
For implementing this I am using PrimeFaces <p:lineChart> component.I am using Prime Face 5.0.
Details Of Graph: X-axis:This will show the hours in 24 hours format,i.e x axis intervals will be like (0,1,2,3,4,5,..23) since 24 hours in a day.I am starting with 0 so,max value will be 23.The gap between interval will be of "1 hour"
Y Axis: this will consist of Response time in milliseconds.The intervals will be in following format:(0,5000,10000,15000,20000,25000,...,45000).The gap between intervals will be "5000".Max value will be 45000 in Y axis.
Below is my managed bean class
@ManagedBean(name = "chartView")
@ViewScoped
public class ChartView implements Serializable {
private static final long serialVersionUID = 62250444917054924L;
private LineChartModel lineChartModel;
@PostConstruct
public void init(){
createChart();
}
private void createChart(){
lineChartModel=new LineChartModel();
lineChartModel.addSeries(initLineChart());
Axis xAxis=lineChartModel.getAxis(AxisType.X);
Axis yAxis=lineChartModel.getAxis(AxisType.Y);
xAxis.setTickInterval("1");
yAxis.setTickInterval("5000");
}
private LineChartSeries initLineChart(){
LineChartSeries chartSeries=new LineChartSeries();
chartSeries.set(0, 10000);
chartSeries.set(1, 15000);
chartSeries.set(2, 18000);
chartSeries.set(3, 12000);
chartSeries.set(4, 13000);
return chartSeries;
}
public LineChartModel getLineChartModel() {
return lineChartModel;
}
public void setLineChartModel(LineChartModel lineChartModel) {
this.lineChartModel = lineChartModel;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
}
here is my xhtml page
<ui:composition 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:body>
<h:panelGroup layout="block" id="lineChart_Div">
<p:lineChart id="line" value="#{chartView.lineChartModel}" animate="true" maxX="23" minX="0"
maxY="45000" minY="0" xaxisLabel="Hours" yaxisLabel="Response Time(ms)"/>
</h:panelGroup>
</h:body>
</ui:composition>
Now my problem is data is getting depicted in Graph but the intervals on X axis and Y axis are not been plotted in the way I have mentioned above.In X-axis intervals appeared like(0.0000,1.6429,3.2857,4.9286,6.5714,... upto 23.0000),but I want it to be in the pattern(0,1,2,3,4,5,6,,7,8,9,...,23)
Likewise in Y-axis intervals appeared like(0,11250,22500,33750,45000) but I want it to be in the format(0,5000,10000,15000,20000,...,45000).
I think i need to customize the intervals for x axis and Y axis but not finding a proper way to do it.I read about "extender" attribute for customizing jqPlot in Prime Faces Chart.But unable to find a solution suitable to my case.
Can anyone provide a any suitable solution to this??? Thanks in advance.
I found the solution.we need to use the "extender" attribute of <p:lineChart> tag as follows:
<p:lineChart id="line" widgetVar="line" value="#{chartController.lineChartModel}" style="height:300px;"
animate="true" extender="plotAxisInterval"/>
Now we need to define this "plotAxisInterval" function in my js file like this:
function plotAxisInterval() {
this.cfg.axes = {
xaxis : {
min : 0,
max : 23,
tickInterval : 1,
tickOptions : {
formatString : '%d'
},
label : 'Hours',
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
labelOptions : {
fontFamily : 'Georgia, Serif',
fontSize : '12pt',
width : '10px'
}
},
yaxis : {
min : 0,
max : 45000,
label : 'Response Time(ms)',
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
tickInterval : 5000,
tickOptions : {
formatString : '%d'
}
}
};
}
finally include the js file inside the xhtml page like this
<h:head>
<h:outputScript name="js/chart.js"/>
</h:head>