Example: Chart

Chart.java

public class Chart extends Component {
    
    @Attribute
    private String key1 = "Example 1";
    @Attribute
    private String key2 = "Example 2";
    @Attribute
    private int value1 = 100;
    @Attribute
    private int value2 = 200;
    
    @Attribute
    public long timestamp() {
        return System.currentTimeMillis();
    }
    
    @Remoted
    public void change(String key1, String key2, int value1, int value2) {
        this.key1 = StringUtils.trimToEmpty(key1);
        this.key2 = StringUtils.trimToEmpty(key2);
        if (key1.length() > 20) {
            key1 = key1.substring(0, 20);
        }
        if (key2.length() > 20) {
            key2 = key2.substring(0, 20);
        }
        this.value1 = value1;
        this.value2 = value2;
        refresh();
    }
    
    @Remoted
    @ResourceBody
    public ResourceResponse image() {
        return new ResourceResponse() {
            public void serve(HttpServletRequest request, HttpServletResponse response) throws IOException {

                DefaultPieDataset pieDataset = new DefaultPieDataset();
                pieDataset.setValue(key1, value1);
                pieDataset.setValue(key2, value2);

                JFreeChart chart = ChartFactory.createPieChart
                                     ("Pie Chart", // Title
                                             pieDataset, // Dataset
                                             true, // Show legend
                                             true,
                                             Locale.getDefault()
                                     );
                
                response.setContentType("image/png");
                ChartUtilities.writeChartAsPNG(
                        response.getOutputStream(), 
                        chart, 
                        400,
                        200);
                response.getOutputStream().close();
            }
        };
    }
}

Chart.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

 <xsl:template match="Chart">
  <div id="{@id}">
   <xsl:call-template name="Chart" />
  </div>
 </xsl:template>

 <xsl:template match="Chart.update">
  <replaceInner id="{@id}">
   <xsl:call-template name="Chart" />
  </replaceInner>
 </xsl:template>
 
 <xsl:template name="Chart">
  <table>
   <tr>
    <th>Key</th>
    <th>Value</th>
   </tr>
   <tr>
     <td><input type="text" value="{@key1}" id="{@id}_k1" /></td>
     <td><input type="text" value="{@value1}" id="{@id}_v1" /></td>
   </tr>
   <tr>
     <td><input type="text" value="{@key2}" id="{@id}_k2" /></td>
     <td><input type="text" value="{@value2}" id="{@id}_v2" /></td>
   </tr>
  </table>
  <input type="button" 
         value="Change" 
         class="button"
         onclick="contextfw.call('{@id}', 'change', $('#{@id}_k1').val(), $('#{@id}_k2').val(), $('#{@id}_v1').val(), $('#{@id}_v2').val())" />
  <br/>
  <img src="{$contextPath}/contextfw-update/{$webApplicationHandle}/{@id}/image/chart.png?timestamp={@timestamp}" />
 </xsl:template>

</xsl:stylesheet>