How to increase width of lines in Primefaces line chart? I want to increase width of line in line charts , but there is no option in tag
Charts in Primefaces are based on jqPlot. For options that are not accessible by the Chart API you have to use the "Extender".
E.g. if you want to set the color and line width for all series you have to create a Javascript function with the extended configuration for your chart:
function myLineChartExtender() {
// this = chart widget instance
// this.cfg = jqPlot options
this.cfg.seriesDefaults = {
color: "#000000",
lineWidth: 10.0
}
}
Then you have to specify the extender:
Primefaces 5.0 and later:
Specify the name of the Javascript function when you initialize the model:
LineChartModel model = new LineChartModel();
...
model.setExtender("myLineChartExtender");
Primefaces before 5.0:
Specify the name of the Javascript function as XHTML parameter:
<p:chart type="line" model="#{bean.model}" extender="myLineChartExtender" />
See jqPlot Options Tutorial for further explanation on how to use the options. A list of all options can be found here.
Related
I'm creating charts with the new ChartJS lib on Primefaces, but I could not find a way to add the value as label on the bar chart or line chart.
Looking on the internet, I've found a JS plugin called chartjs-plugin-datalabels! that does what I need.
How could I use this plugin on my Java Primefaces application?
Try this...
Add the script to your XHTML page:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #2 Java bean.
function chartExtender() {
var options = {
plugins: [ChartDataLabels],
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
This was all based on their configuration guide https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#configuration But this should at least get the plugin going.
I have tried to search both the forum and Google extensively, but I have problems understanding how I should make this work:
PrimeFaces6
I have a BarchartModel based on the tutorial in the ShowCase:
CODE: SELECT ALL
private BarChartModel initStatusBarChart() {
BarChartModel model = new BarChartModel();
ChartSeries statusMessages = new ChartSeries();
statusMessages.setLabel("Label"));
statusMessages.set("Some String 1", list1.size());
statusMessages.set("Some String 2", list2.size());
model.addSeries(statusMessages);
return model;
}
The issue is that on render, I get tooltips the format of
"1, 515" and "2, 432", where 515 and 432 are the sizes of list1 and list2, respectively.
How can I replace 1 and 2 with the values "Some String" 1 and 2 ? Have tried extending highlighter and using dataTipFormat, with no success.
I solved the problem using the datatip editor of the chart model (with Primefaces 6.1, by the way). I used this for a stacked bar chart.
I needed to apply this solution at two places: the backing bean and the JSF page.
In the backing bean I had to set a JavaScript function name this way:
barModel.setDatatipEditor("chartDatatipEditor");
I tried to set it using the corresponding tag attribute in the JSF page but to no effect.
In the JSF I inserted this JavaScript code:
<script type="text/javascript">
function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
//console.log('chartDatatipEditor: '+str+" - "+seriesIndex+" - "+pointIndex);
var point = seriesIndex+','+pointIndex;
#{bean.datatipsJs}
}
</script>
This JS function gets the chart coordinates as parameters. I concat them so that the following JS code gets easier.
seriesIndex is the index of the chart series. pointIndex is the index on the X scale of the diagram.
To find out what are the correct values for your chart you can uncomment the console.log line above.
The inserted JS code is constructed in the backing bean this way:
private Map<String, String> chartDatatips;
public String getDatatipsJs() {
StringBuilder sb = new StringBuilder("switch ( point ) {\n");
for (String point : chartDatatips.keySet()) {
sb.append("case '").append(point).append("': return '").append(chartDatatips.get(point)).append("'; break;\n");
}
sb.append("default: return 'Unknown point'; break; }");
return sb.toString();
}
The map chartDatatips has the coordinate point as key (e.g., "2,1") and the tooltip as value.
During the chart setup you obviously have to fill this map with useful details ;-)
Like this:
chartDatatips.put("2,5", "Label ...");
...
Hope this helps, if you didn't already solved this.
~Alex
Based on Alex's answer I have come up with this. Only requiring javascript - it displays the label and value:
In the backing bean, set a JavaScript function name this way:
barModel.setDatatipEditor("chartDatatipEditor");
In the HTML file:
function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
return plot.series[seriesIndex].label + ' - ' + plot.data[seriesIndex][pointIndex];
}
I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
I'm using primefaces + jqplot to create a Horizontal and Stacked bar chart:
Code ( Example - Primefaces ):
http://www.primefaces.org/showcase/ui/chart/bar.xhtml
I need to add a line in chart like this image: ( Red line in Vertical )
http://peltiertech.com/Excel/pix1/AddLine.gif
Can i do this with Primefaces + Jqplot ? If it's possible, someone can help me to understand ?
Finally solved my problem:
1 - Add a extender in Managed Bean with name of extender:
horizontalBarModel.setExtender("NAME");
2 - Create a javascript function in xhtml:
function NAME(){}
3 - Add a Canvas Overlay:
function NAME()
{
this.cfg.canvasOverlay = {
show: true,
objects: [{verticalLine:{
"shadow":"false",
"lineWidth":5,
"color":"rgb(255,0,0)",
"x":50
}}]};
}
4 - This vertical/horizontal lines depend on the following files (using Primefaces 5.0):
jqplot.canvasOverlay.js
You can find this file in Bitbucket Cleonello Jqplot.
5 - Add Labels and Tooltips with: Bitbucket Cleonello Jqplot - Support to canvas overlay lines.
how to remove the dots from p:lineChart and draw the chart as just the continuous line?
Thanks
For others with similar problem, I did:
<p:chart type="line" model="#{myController.model}"/>
and:
LineChartSeries serie = new LineChartSeries();
serie.setShowMarker(false);
and worked fine. I'm using PrimeFaces 5.1.
There is a showMarkers attribute that isn't working for me (I'm using PrimeFaces 3.4.2) but I found a way to hide them.
It's a bit hacky, I made it working on the showcase, you just need to replace widget_category by the widget of your chart. You can even test it online from the showcase using a javascript console if your web browser allows it (tested under chromium) :
// loop through the series
for (var i = 0; i < widget_category.cfg.series.length; ++i) {
// Hide markers
widget_category.cfg.series[i].showMarker = false;
// I'm not sure you want this when talking about 'continuous line'
// but you can make your chart smooth this way :
widget_category.cfg.series[i].rendererOptions = { smooth: true };
}
// Ask a refresh using the modified configuration object
widget_category.refresh(widget_category.cfg);