Fusion of VisualForce and charts

After you have set up your visualforce workflow and trained you employees, next thing you would want is to analyze your data. You would want to keep track of your business’ key performance indicators (KPIs) to have the big picture of where your organization stands and where its heading. Visual Force has in built charting API but the variety of charts that you can draw are limited. A better alternative is Fusion Charts and since the arrival of FusionCharts VisualForce API component, it integrates seemlessly with VisualForce.

Let’s try to draw a basic column chart of weekly sales data using FusionCharts VisualForce API. Here is what you will need to do.

Get Fusion Charts

First thing you will need is to import static FusionCharts resources on VisualForce. You can download evaluation version from here. You will need to upload all the charts as static resources.

  1. Unzip the archive
  2. Obtain Charts folder and compress it into a zip file
  3. Go to Salesforce | Setup | Develop | Static Resources | New upload the zip under the name FusionCharts

Upload the component

  1. Go to Salesforce | Setup | Develop | Components | New
  2. Copy the contents of component.xml and save under the name fusioncharts

Now you are all set to use Fusioncharts Visualforce API inside your apex pages.

Controller

You will need to setup a apex controller to provide data to render the charts. The component will accept the name and the @RemoteAction method of this controller which will provide data. For our use case, we will need the following controller. Add this controller in Salesforce | Setup | Developer Console.

Remember to send the JSONified data using VisualForce JSON API


global class MyController{
    public MyController(){}

    @RemoteAction
    public static String getJSONColumnData(){
        List datalist = new List();
        datalist.add(new Data("Week1", "14400"<span style="font-size: 13px; line-height:   19px;">));</span>
        datalist.add(new Data("Week2", "19600"));
        datalist.add(new Data("Week3", "24000"));
        datalist.add(new Data("Week4", "15700"));
        Wrapper data = new Wrapper(datalist);
        return data.toJSON();
    }

    private class Data{
        private String label;
        private String value;

        public Data(String label, String value){
            this.label = label;
            this.value = value;
        }
    }
    private class Wrapper{
        private List data;
        public Wrapper(List list){
            this.data = list;
        }
    }
}

Display the Chart

Now that your backend is set up all we need to do is use the <apex> component API to draw the chart. Since we already have component.xml in a component under the fusioncharts namespace, we can refer to that component on any apex page using <c:fusionchart> tag.

It is as attributes of this tag that you will use the component api. Anything that you would have provided as an attribute to <chart/> tag in XML api, or as a chart property in FusionCharts JSON api, you will provide as an attribute to this component. Additionally you will have to provide the chart attribute to refer to the relevant FusionCharts static file for example, chart="{!URLFOR($Resource.FusionCharts, 'Charts/Column3D.swf')}", and a chartId attribute to identify a chart uniquely on a page. You will also have to provide height and width attributes.

On any apex page, place the following tag.


<c:fusioncharts chartId="firstChart" chart="{!URLFOR($Resource.FusionCharts, 'Charts/Column3D.swf')}" width="400" height="300" debugMode="0"  dataController="MyController.getJSONColumnData" caption="Weekly Sales Summary!" xAxisName="Week" yAxisName="Sales" numberPrefix="$"/>

And that’s it

You have created your first FusionCharts using Apex API. If everything went well, you should be able to see screen similar to this.

[Image missing due to VisualForce account expired.]

FusionCharts Visualforce API

Fusion Charts is a great way of doing charts. It provides a wide range of charts and a javascript api that draws visually appealing graphs of your data. But some Visualforce users would like to draw such charts without writing any client code. FusionCharts VisualForce API is a Visualforce component, which is built on top of FusionCharts Javascript api, that does just that. It provides an api to draw FusionCharts XT charts.

After initial setup is done, all one has to do is to include the `<c:fusioncharts/>` component tag, provide chart meta data as attributes, and arrange an apex controller that provides the data.  It is as attributes of this tag that you will use the component api. Anything that you would have provided as an attribute to <pre><chart/></pre> tag in FusionCharts XML api, or as a chart property in FusionCharts JSON api, you will provide as an attribute to this component. At the moment not all attributes are supported. Only attributes mentioned in Quick Start Chart configuration in fusioncharts developer documentation are supported. But comprehensive coverage of FusionCharts api is planned.

The required attributes of this component tag are

  • chartId: A unique id for the chart.
  • chart: As usual with FusionChart javascript api, provide relative path of the actual chart file that you want to draw.
  • width
  • height
  • dataController: The data controller remote action name that will provide data to draw the chart.

There are a couple of optional attributes as well like isJSON and debugMode. Other attributes are  exactly the same as in FusionCharts XML data API. You can refer to them on official documentation site.

The github page readme guide is quite exhaustive about the initial setup and quick start process. You should peruse that for quickly drawing your first chart. One cool feature of this component is its non intrusive nature. If you want to pass the chart metadata as old style `chart` JSON property or as attributes to `<chart/>` tag, you can very well do so. One thing you should remember though is that the component configuration will always trump over the old style data configuration. So whatever you mention inside the `<c:fusioncharts/>` attributes will always hold regardless what chart meta data you send along with your data.

The controller can send either XML or JSON data in the format specified in FusionCharts api, both will work very well with this component. The component assumes data to be in XML format and tries to parse it, failing which it falls back to parsing it in JSON. If both operations fail, an Error is thrown. You can explicitly specify in which format controller is sending the data with optional `isJSON` boolean attribute. Setting it to true will not result in an attempt to parse data as XML and vice versa.

The XML parsing is quite hacky at the moment. The component first deserializes the XML data into a DOM object, adds all the component attributes, then serializes again into a string and passes it to FusionCharts `setXMLData` method which possibly deserializes it again. There is a possible scope for gaining performance for large datasets here.

This is still an alpha version, some apis still needs to be added and some performance fixes needs to be done. But feel free to use it in your app and provide feedback. If you face a bug or you see possibility of additional features, please raise github issues. Happy Charting ! >__<