See all tutorials

Tutorials » A simple SVG bar chart

The tutorial will generate a bar chart in SVG format, which can be displayed by all modern browsers. Webpagebytes CMS can manage very easy text based content and since SVG format is text based it means it can be generated easy.

In order to generate a SVG bar chart take the following tasks:

Create a site page with the SVG content

Step 1

In Webpagebytes CMS administration interface go to 'Site pages' section and create a new page with the content below. The content contains Freemarker script in order to generate the dynamic bar chart items.

<#assign records=wpbAppModel["records"] max=0 count=0 maxWidth=1700 maxHeight=800 />
<#assign colors=["DD0000","00DD00","0000DD","DDDD00","225588","889900","774422"] />
<#list records as item>
    <#if (max < item.value?number)>
        <#assign max = item.value?number >
    </#if>
    <#assign count=(count + 1) />
</#list>
<#if (count<=1)>
    <#assign barWidth=200 />
<#else>
    <#assign barWidth= (maxWidth)/count />
</#if>

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="250" viewBox="0 0 2000 1000">
<defs>
    <#list records as item>
        <linearGradient id="myFillGrad_${item_index}" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#${item.color}" stop-opacity="1"/>
            <stop offset="100%" stop-color="#${item.color}" stop-opacity="0.8"/>
        </linearGradient>
    </#list>
</defs>
<#list 1..8 as item>
    <line x1="150" y1="${100*item}" x2="1950" y2="${100*item}" style="stroke:#5A5A5A;stroke-width:1; " />
    <text x="130" y="${100*item+10}" stroke="#5A5A5A" font-family="Veranda" font-size="40" text-anchor="end"> ${(max - max*item_index/8)} </text>
</#list>
<line x1="0" y1="${901}" x2="2000" y2="${901}" style="stroke:#000000 ;stroke-width:2; " />

<#list 1..count as item>
    <#assign y=(maxHeight*(records[item-1].value?number))/max />
    <rect x="${(200+item_index*barWidth)?string.computer}" y="${100+800-y}" width="${barWidth?string.computer}" height="${y?string.computer}" fill="url(#myFillGrad_${item_index})"/>
    <text x="${(200+item_index*barWidth + barWidth/2)?string.computer}" y="960" font-family="Veranda" font-size="60" text-anchor="middle"> ${records[item-1].name} </text>
    <text x="${(200+item_index*barWidth + barWidth/2)?string.computer}" y="${100+800-y+50}" font-family="Veranda" font-size="50" text-anchor="middle" fill="white"> ${records[item-1].value}$ </text>
    </#list>
</svg>

Populate the controller with chart data

Step 2

Create a controller class that implements WPBRequestHandler interface with the code below.

public void handleRequest(HttpServletRequest request,
        HttpServletResponse response, WPBModel model, WPBForward forward)
        throws WPBException 
{
    ...
    ArrayList<Map<String, Object>> items = new ArrayList<Map<String,Object>>();
    Map<String, Object> item1 = new HashMap<String, Object>();
    item1.put("name", "Utilities");
    item1.put("value", "390");        
    items.add(item1);
    
    Map<String, Object> item2 = new HashMap<String, Object>();
    item2.put("name", "Travel");
    item2.put("value", "640");
    items.add(item2);
    
    Map<String, Object> item3 = new HashMap<String, Object>();
    item3.put("name", "Food");
    item3.put("value", "380");        
    items.add(item3);
    
    Map<String, Object> item4 = new HashMap<String, Object>();
    item4.put("name", "Loans");
    item4.put("value", "430");
    items.add(item4);
    
    model.getCmsApplicationModel().put("records", items);
    ...
}

Publish the site page

Step 3

Publishing the site page with the data populated in the controller is similar with a step done in a previous tutorial, generate dynamic web page.

Test the generated SVG bar chart

Step 4

In a browser load the url published at step 3 to see the SVG bar chart generated. The value of the chart items are the ones from the controller.
SVG bar chart generated with Webpagebytes CMS

Useful resources

Fork me on GitHub