{"id":595,"date":"2019-02-04T12:50:00","date_gmt":"2019-02-04T18:50:00","guid":{"rendered":"https:\/\/blog.felineflock.com\/?p=595"},"modified":"2024-01-01T12:51:48","modified_gmt":"2024-01-01T18:51:48","slug":"how-to-create-charts-using-svg-and-visualforce","status":"publish","type":"post","link":"https:\/\/blog.felineflock.com\/index.php\/2019\/02\/04\/how-to-create-charts-using-svg-and-visualforce\/","title":{"rendered":"How to Create Charts using SVG and VisualForce"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

VisualForce is used to generate HTML pages but it can also create other kinds of presentation. One common alternative is to render VisualForce as PDF.<\/p>\n\n\n\n

This article proposes a third type of presentation that can be generated via VisualForce: images.<\/p>\n\n\n\n

Scalable Vector Graphics is a graphics format that uses a markup language to describe the images. It is text-like just like HTML. With HTML you can tell the browser to draw an input element or a paragraph and specify the border, colors, margins, and with SVG you can tell the browser to draw rectangles, circles, polygons and other shapes.<\/p>\n\n\n\n

In the example below, I’ve used a VisualForce page rendered as SVG to draw a donut chart:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The donut chart is an IMAGE formula field in the Property custom object.<\/p>\n\n\n\n

Usually the IMAGE function is used to display static images, such as red flags, say when an approval status is rejected: IMAGE ( “\/img\/samples\/flag_red.gif”, “Red” )<\/p>\n\n\n\n

This pushes the envelope a little further by invoking a VisualForce page with parameters to generate a image.<\/p>\n\n\n\n

Here is how the formula for the donut chart is defined:<\/p>\n\n\n\n

\n

IMAGE( ‘\/apex\/DonutChart?labels=Living Room,Dining Room,Master BR’<\/p>\n\n\n\n

\u00a0 \u00a0 + ‘,Bedroom %232,Bedroom %233,Others&values=’<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0+ TEXT( Living_Room__c ) + ‘,’ + TEXT( Dining_Room__c )<\/p>\n\n\n\n

\u00a0 \u00a0 + ‘,’ + TEXT( Master_Bedroom__c ) + ‘,’<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0+ TEXT( Bedroom_2__c ) + ‘,’ + TEXT( Bedroom_3__c ) + ‘,’<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0+ TEXT( Square_Feet__c – Living_Room__c – Dining_Room__c\u00a0 \u00a0 – Master_Bedroom__c – Bedroom_2__c – Bedroom_3__c )<\/p>\n\n\n\n

\u00a0 \u00a0 + ‘&number=’ + TEXT( Square_Feet__c )<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0+ ‘&label=Square Feet’<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0, ‘chart’, 250, 250 )<\/p>\n<\/blockquote>\n\n\n\n

The formula is invoking the VisualForce page named “DonutChart” and passing the following parameters:<\/p>\n\n\n\n