Commission Bonuses Pie Chart

• C# Sample Code /
• Charts/Graphs /
• Commission Bonuses Pie Chart

Overview

Namespaces

This sample requires the following namespaces:

using ExigoWebService;
using ExigoOData;
using System.Data.Services.Client;
using System.Text;

Exigo API Authentication

This sample accesses OData using the ExigoContext object:

    public ExigoContext ExigoOData
    {
        get
        {
            var context = new ExigoOData.ExigoContext(new Uri("http://api.exigo.com/4.0/" + exigoAPICompany + "/model"));
            context.IgnoreMissingProperties = true;
            var credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes(exigoAPILoginName + ":" + exigoAPIPassword));
            context.SendingRequest +=
                (object s, SendingRequestEventArgs e) =>
                    e.RequestHeaders.Add("Authorization", "Basic " + credentials);
            return context;
        }
    }
    

Fetching Commission Bonuses

We fetch the customer's commission bonuses by querying the CommissionBonuses OData, supplying the current customer ID, the period type ID and the period ID. We only need the description and amount of each bonus, so we only request those fields to ensure our call is as fast as possible.

    private List<CommissionBonus> FetchCommissionDetails()
    {
        return ExigoOData.CommissionBonuses
            .Where(v => v.CustomerID == customerID)
            .Where(v => v.CommissionRun.PeriodTypeID == PeriodTypeID)
            .Where(v => v.CommissionRun.PeriodID == PeriodID)
            .Select(v => new CommissionBonus()
            {
                BonusDescription = v.BonusDescription,
                Amount = v.Amount
            }).ToList();
    }
    

Google Pie Chart

We are using Google's Pie Chart Visualization API to display our data.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1', { packages: ['corechart'] });
    google.setOnLoadCallback(Render<%=this.UniqueID %>Chart);


    // Configures and renders the '<%=this.UniqueID %>' chart
    function Render<%=this.UniqueID %>Chart() {

        // Define the data in the chart
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Bonus');
        data.addColumn('number', 'Value');

        // To add more than one bonus at a time, add another row to the data.addRows array
        data.addRows([
            <% RenderChartDataSource(); %>
        ]);


        // Configure the chart
        var options = {
            width: <%=Width %>,                             // How wide the chart is in pixels
            height: <%=Height %>,                           // How tall the chart is in pixels
            title: '<%=Title %>',                           // Text to display above the chart.
            is3D: true,                                     // If set to true, displays a three-dimensional chart.
            chartArea: {                                    // An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:"50%",height:"75%"}
                left: 10,
                top: 40,
                width: <%=Width - 20 %>,
                height: <%=Height - 50 %>
            },
            legend: {                                       // An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
                position: 'right'
            }
        };


        // Format the currencies
        var formatter = new google.visualization.NumberFormat({
            groupingSymbol: ',',
            decimalSymbol: '.',
            fractionDigits: 2,
            negativeColor: 'red',
            negativeParens: true,
            prefix: '$'
        });
        formatter.format(data, 1); // Apply formatter to Value column in our DataTable object.


        // Draw the chart
        var chart = new google.visualization.PieChart(document.getElementById('Chart_<%=this.UniqueID %>'));
        chart.draw(data, options);
    }
</script>
<span id='Chart_<%=this.UniqueID %>' style="display: inline-block; width: <%=Width %>;
    height: <%=Height %>"></span>

Rendering the data source for the Google pie chart is surprisingly simple. We take our bonus details from the API, and emulate a simple JSON compiler.

    public void RenderChartDataSource()
    {
        // Instantiate our variables
        StringBuilder html = new StringBuilder();
        int renderedDetailCounter = 0;


        // Render a new row in the JSON for each bonus we have
        foreach (var detail in Model)
        {
            // If this is not the first bonus we've added to this collection, add a comma to separate our arrays
            if (renderedDetailCounter > 0)
            {
                html.Append(",");
            }

            // Add a bonus array
            html.AppendLine(string.Format("['{0}', {1}]", detail.BonusDescription, detail.Amount));

            // Increment our counter
            renderedDetailCounter++;
        }


        // Write our JSON to the page
        HtmlTextWriter writer = new HtmlTextWriter(Response.Output);
        writer.Write(html.ToString());
    }