1

I'm trying to print a few chart objects generated inside a <p:repeat></p:repeat> tag.

I know that the regular <p:printer> tag does not work with primefaces charts due to the use of HTML5 Canvas...es? Canvii?

Either way, I grabbed this JS function from another SO post, but I can't quite get it to work the way I want.

This is my panel with charts:

<script  type="text/javascript">
    function exportChart(component) {
        //export image
        $('#output').empty().append(PF(component).exportAsImage());

        //show the dialog
        PF('dlg').show();
    }
</script>

<p:dialog widgetVar="dlg" showEffect="fade" modal="false" header="Druckbares Diagramm als Bild" resizable="true">
    <p:outputPanel id="output" layout="block" style="width:1000px;height:300px"/>
    <p:commandButton onClick="javascript:PF('dlg').hide()" value = "Schließen"/>
</p:dialog>
<p:panel id="charts">
    <p:repeat value="#{AttributeChartsController.kacModel.chartWrappers}" var="wrapper" style="height: #{wrapper.drawHeight}" >
        <p:chart type="bar" model="#{wrapper.chart}" style="height: #{wrapper.drawHeight}" widgetVar="#{wrapper.widgetVarIdStr}"/>

        <p:commandLink id="lnk#{wrapper.widgetVarIdStr}" onclick="print(#{wrapper.widgetVarIdStr})">Print</p:commandLink>
    </p:repeat>
</p:panel>

I set my widgetVar to widgetVarIdStr which is generated for each chart like this, kind of:

//these are values retrieved from a database
long widgetVarId = 0;
for(Entry<String, HashMap<String, String>> entry : keyAttribs.entrySet()) {
            this.chartWrappers.add(createChartWrapper(entry.getKey(), entry.getValue()));
            widgetVarId++;
        }

private ChartWrapper createChartWrapper(String attribName, HashMap<String, String> keyValue) {
    //... create Chart, ChartSeries, enter values, etc
    wrapper.setWidgetVarId(widgetVarId);
    return wrapper;
}

The result is this, however:

enter image description here The chart works, the print button is there and has the right value, but the widgetVar doesn't seem to get set properly within the <p:repeat> element. The widgetVar property is also nowhere to be found in the final generated source of the page, is that normal?

Here is my chartWrapper, there's probably a more elegant way to do what I want to do here but I'll stick with it:

public class ChartWrapper {
    private HorizontalBarChartModel chart;
    private long drawHeight;
    private long widgetVarId;

    public HorizontalBarChartModel getChart() {
        return chart;
    }
    public void setChart(HorizontalBarChartModel chart) {
        this.chart = chart;
    }
    public long getDrawHeight() {
        return this.drawHeight();
    }
    public void setDrawHeight(long drawHeight) {
        this.drawHeight = drawHeight;
    }
    public String getDrawHeightStr() {
        return drawHeight+"px";
    }
    public long getWidgetVarId() {
        return widgetVarId;
    }
    public void setWidgetVarId(long widgetVarId) {
        this.widgetVarId = widgetVarId;
    }
    public String getWidgetVarIdStr() {
        return "attrChart"+widgetVarId;
    }
}
Community
  • 1
  • 1
Wep0n
  • 392
  • 3
  • 15
  • Did you inspect the generated html? Are the widgetVars there? – Kukeltje May 11 '17 at 07:50
  • As I said in my question, the widgetVar property is also nowhere to be found in the final generated source of the page. So no, they are not for some reason. I also tried setting the id property for the `` tag, but that didn't work either. Edit: Here's what it looks like in the inspector on Firefox https://i.gyazo.com/6493d9afe41e411f47b104932172b9d2.png – Wep0n May 11 '17 at 07:52
  • Sorry, missed that part... Did not expect such fundamental information (kudos for checking this upfront) in the middle of a post. The widVar value is somewhere in the javascript e.g. the second 'chart' in `{PrimeFaces.cw('Chart','chart',` in the case of the ['export' example](https://www.primefaces.org/showcase/ui/chart/export.xhtml) it is not available as an html attribute. This can only be seen with 'view-source' – Kukeltje May 11 '17 at 08:02
  • It's a little hard to read in the source since all the charts are in literally one line, but I get this (hope this is enough of a relevant bit) ` – Wep0n May 11 '17 at 08:13
  • 2
    Oh oh, okay, it still didn't work but I fixed it, my function call needed to be like this `onclick="exportChart('#{wrapper.widgetVarIdStr}')"`(note the single quotes to declare it as string) - however, I still get an error: `TypeError: PF(...) is undefined` This should be helpful in that regard -> http://stackoverflow.com/questions/30319372/ - Thanks, it sure helped having someone else look over it with me xD – Wep0n May 11 '17 at 08:17
  • On what line? And are you sure `out.appendChild(PF(component).exportAsImage()); ` is what you need? – Kukeltje May 11 '17 at 08:21
  • I get the error with the JS from the example as well as the one I used. The call is from within a generated element in the repeat tag so there isn't a fixed line attached to it, however it happens in this call: `$('#output').empty().append(PF(component).exportAsImage());`as well as this one: `out.appendChild(PF(component).exportAsImage());` - And yes, the exportAsImage function is indeed what I need, I need to get the charts into a printable (literally, as in, on paper) format. – Wep0n May 11 '17 at 08:23
  • I did not mean you did not need the exportAsImage but if it should be done in that way...I mean, can you add an image to a div tag like that – Kukeltje May 11 '17 at 08:31
  • The example said so, as well as the linked SO post. I'm honestly not sure how I could or should approach it in another way, it seems fine to me (if it worked) – Wep0n May 11 '17 at 08:32
  • PrimeFaces and the link use jquery and not plain dom like you do... – Kukeltje May 11 '17 at 08:36
  • I should clarify, I've switched over to the example code since it's working for me now, and I was referring to this: http://stackoverflow.com/questions/25304803/primeface-print-doesnt-work-with-pchart/35213008#35213008 - it's the link from my post/question. I'm going to edit my question accordingly, it all works now however. – Wep0n May 11 '17 at 08:52
  • Please create an answer or even find a duplicate (I think there is, not for the charts specifically but for the missing quotes around the widgetVar. Adding 'answers' to questions is not what is common practice in StackOverflow – Kukeltje May 11 '17 at 09:34

1 Answers1

1

I found the solution to my problems with the help of the comment section, it came down to some missing quotes in my jscript call

onclick="exportChart(#{wrapper.widgetVarIdStr})" did not work because it was trying to pass an object to the function. I changed it accoridngly:

onclick="exportChart('#{wrapper.widgetVarIdStr}')" so now the actual widgetVar gets passed to the function as a string, which works as expected.

Wep0n
  • 392
  • 3
  • 15