How can I export a p:chart type "line" to image as png or jpg file? - primefaces

Question

I am sorry for my english level but I have a problem that has been going on for more than 3 days without finding any answer. My question is how I can export as image(png o jpg file) a p:chart type "line", I'm using JSF 2.1 and primefaces 5.3.
I leave my code here ...
<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"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pe="http://primefaces.org/ui/extensions"
template="/plantillas/templateHistComp.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="dmy" />
<f:event listener="#{InfoHistMB.init}" type="preRenderView" />
</f:metadata>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>::INFOAIRE::</title>
<h:outputScript name="js/layout.js" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnKoDxm56hN4vhtkWuJdnSfejjJNc60Es"></script>
<!-- <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>-->
<h:outputText value="<!--[if gte IE 9]>" escape="false" />
<style type="text/css">
/* styles for IE 9 */
</style>
<h:outputText value="<![endif]-->" escape="false" />
<ui:insert name="head" />
<h:outputStylesheet name="grid/grid.css" library="primefaces" />
</h:head>
<h:body id="bodyInfHist">
<h:outputScript library="jqplot-plugin" name="jqplot.canvasOverlay.min.js" target="head" />
<!-- <h:outputScript library="js" name="extra_config.js" target="head" /> -->
<f:view>
<h:form id="formInfoHist">
<p:breadCrumb style="margin:0 auto;">
<p:menuitem value="Inicio" url="#" />
<p:menuitem value="Info Aire" outcome="/InformacionHistorica.xhtml"/>
<p:menuitem value="Historica-Comparativa" outcome="/InfoHistComparativa.xhtml"/>
<p:menuitem value="Historica-Detalle" outcome="/InfoHistDetalle.xhtml"/>
</p:breadCrumb>
<div class="ui-fluid">
<!-- <p:messages id="messages" showDetail="true" autoUpdate="false" closable="true" /> -->
<p:panelGrid columns="6" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="Departamento:"/>
<p:selectOneMenu id="departamentoBusqueda" value="#{InfoHistMB.departamento}" required="true" requiredMessage="Departamento es requerido!">
<p:ajax event="change" listener="#{InfoHistMB.onDepartamentChange}"
update="provinciaBusqueda,distritoBusqueda,estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccione" itemValue="#{null}"/>
<f:selectItems value="#{InfoHistMB.listaDepartamento}" var="ld" id="listaDepartamentos"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDepa}"/>
</p:selectOneMenu>
<p:outputLabel value="Provincia:"/>
<p:selectOneMenu id="provinciaBusqueda" value="#{InfoHistMB.provincia}">
<p:ajax event="change" listener="#{InfoHistMB.onProvinciaChange}"
inmediate="true" process="#form" update="distritoBusqueda,estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccionar" itemValue="00" />
<f:selectItems value="#{InfoHistMB.listaProvincia}" var="ld" id="listaProvincias"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoProv}"/>
</p:selectOneMenu>
<p:outputLabel value="Distrito:"/>
<p:selectOneMenu id="distritoBusqueda" value="#{InfoHistMB.district}">
<p:ajax event="change" listener="#{InfoHistMB.onDistritoChange}"
inmediate="true" process="#form" update="estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccionar" itemValue="00"/>
<f:selectItems value="#{InfoHistMB.listaDistrito}" var="ld" id="listaDistritos"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDist}"/>
</p:selectOneMenu>
<p:outputLabel value="Estación:"/>
<p:selectOneMenu id="estacionBusqueda" value="#{InfoHistMB.estacion}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaEstacion}" var="ld" id="listaEstaciones"
itemLabel="#{ld.vNombreEstacion}" itemValue="#{ld.idEstacion}"/>
</p:selectOneMenu>
<p:outputLabel value="Periodo de medición:"/>
<p:selectOneMenu id="periodoMedicion" value="#{InfoHistMB.idPeriodoMed}">
<p:ajax event="change" listener="#{InfoHistMB.onPeriodoMedChange}"
inmediate="true" process="#form" update="parametro,finit"></p:ajax>
<f:selectItems value="#{InfoHistMB.listaPeriodoMed}" var="ld" id="listaPeriodoMed"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idElemento}"/>
</p:selectOneMenu>
<p:outputLabel value="Fuente:"/>
<p:selectOneMenu id="fuente" value="#{InfoHistMB.idEntidadFuente}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaFuente}" var="ld" id="listaFuente"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idEntidad}"/>
</p:selectOneMenu>
<p:outputLabel value="Parametro:"/>
<p:selectOneMenu id="parametro" value="#{InfoHistMB.idParametro}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaParametro}" var="ld" id="listaParametro"
itemLabel="#{ld.vNombreParametro}" itemValue="#{ld.idParametro}"/>
</p:selectOneMenu>
<p:outputLabel value="Fecha inicio:"/>
<p:calendar value="#{InfoHistMB.ffinit}" id="finit" disabled="#{InfoHistMB.enableFecha}" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!"></p:calendar>
<p:outputLabel value="Fecha fin:"/>
<p:calendar value="#{InfoHistMB.ffin}" id="fend" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!" ></p:calendar>
</p:panelGrid>
<div id="buscar" align="right" style="width:100%;">
<p:commandButton value="Buscar" id="buscar" actionListener="#{InfoHistMB.updateTable}" process="#form" inmediate="true" update="tablaResultados,EstacionMarker" icon="ui-icon-search" style="margin: 15px 10px; width:100px;">
</p:commandButton>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-6" style="padding:10px 10px 0px 5px;">
<f:view contentType="text/html">
<p:gmap id="EstacionMarker" center="-12.046374, -77.042793" zoom="10" type="HYBRID" model="#{InfoHistMB.simpleModel}" style="width:100%;height:450px" />
</f:view>
</div>
<div class="ui-grid-col-6" style="padding: 0px 5px;">
<h3 style="color:#9B9995; padding:5px 5px;font-size: 1.5em;" >
Resultados Obtenidos</h3>
<p:dataTable id="tablaResultados" var="resultado" value="#{InfoHistMB.listaElementosTabla}" reflow="true" rows="5" paginator="true" tableStyle="width:auto" >
<p:column headerText="Ubigeo">
<h:outputText value="#{resultado.departamento}" />
</p:column>
<p:column headerText="Estaciones">
<h:outputText value="#{resultado.estaciones}"/>
</p:column>
<p:column headerText="Parámetros">
<h:outputText value="#{resultado.parametros}" />
</p:column>
<p:column headerText="Fecha inicio">
<h:outputText value="#{resultado.fechaInit}" />
</p:column>
<p:column headerText="Fecha fin">
<h:outputText value="#{resultado.fechaFin}" />
</p:column>
<p:column id="columnVer" headerText="Ver ">
<p:commandButton id="ver" value="Ver" actionListener="#{InfoHistMB.updateGraficolinear(resultado)}" process="#form" inmediate="true" update="formInfoHist:graficoLineal,formInfoHist:exEca,formInfoHist:exNoEca" icon="ui-icon-extlink" />
</p:column>
</p:dataTable>
</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<h2 style="padding:15px 0px; text-transform: capitalize; text-align: center; font-family: Arial, Helvetica, sans-serif;">
Comparativo entre el resultado de la búsqueda y el estandar de calidad ambiental</h2>
</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-9">
<p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/>
</div>
<div class="ui-grid-col-3">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 1px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<h:outputText value="Nº de veces que se excedió el estandar de calidad ambiental " />
<h:outputText id="exEca" value="#{InfoHistMB.excedeEca}" ></h:outputText>
</p:panelGrid>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 2px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<h:outputText value="Nº de veces que no se excedió el estandar de calidad ambiental " />
<h:outputText id="exNoEca" value="#{InfoHistMB.noExcedeEca}" ></h:outputText>
</p:panelGrid>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 1px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12" align="center">
</div>
</div>
</div>
</div>
</div>
</div>
</h:form>
<script type="text/javascript">
function chartExtender() {
this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
}
</script>
</f:view>
</h:body>
</ui:define>
</ui:composition>
Exactly this is section of p:chart ...
<div class="ui-grid-col-9">
<p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/>
</div>
I generate the graph dynamically from a database but I have not had a problem with it. I have used the example of the primefaces page but without any result.

Answer 1

Primefaces provide client side method to convert chart to an image that can be downloaded
The following is an example from primefaces reference guide
<p:chart type="line" model="#{bean.model}" style="width:500px;
height:300px" widgetVar="chart"/>
<p:commandButton type="button" value="Export" icon="ui-icon-extlink"
onclick="exportChart()"/>
<p:dialog widgetVar="dlg" showEffect="fade" modal="true"
header="Chart as an Image">
<p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
</p:dialog>
function exportChart() {
//export image
$('#output').empty().append(PF('chart').exportAsImage());
//show the dialog
PF('dlg').show();
}