Volume Gauge

• C# Sample Code /
• Charts/Graphs /
• Volume Gauge

Overview

Namespaces

This sample requires the following namespaces:

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 Period Volumes

We fetch the customer's volumes by querying the PeriodVolumes OData, supplying the current customer ID and the period type ID. We only need three volume buckets, so we only request the buckets to ensure our call is as fast as possible.

        return ExigoOData.PeriodVolumes
            .Where(v => v.CustomerID == customerID)
            .Where(v => v.PeriodTypeID == PeriodTypeID)
            .Where(v => v.Period.IsCurrentPeriod == true)
            .Select(v => new PeriodVolume()
            {
                Volume1 = v.Volume1,
                Volume2 = v.Volume2,
                Volume3 = v.Volume3
            }).FirstOrDefault();
        

Google Gauge

We are using Google's Gauge Visualization API to display our data. In this example, we are also using a Model to supply our data to the Google API (see lines 17-19) rather than rendering our data directly to the response.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1', { packages: ['gauge'] });
    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', 'Label');
        data.addColumn('number', 'Value');

        // To add more than one gauge at a time, add another row to the data.addRows array
        data.addRows([
            ['PBV', <%=Model.Volume1 %>],
            ['GBV', <%=Model.Volume2 %>],
            ['PCV', <%=Model.Volume3 %>]
        ]);


        // Configure the chart
        var options = {
            width: <%=Width %>,                 // How wide the gauge is in pixels
            height: <%=Height %>,               // How tall the gauge is in pixels

            min: 0,                             // The minimum value of the gauge
            max: 100,                           // The maximum value of the gauge

            greenColor: '#109618',              // The color to use for the green section, in HTML color notation.
            greenFrom: 90,                      // The lowest value for a range marked by a green color. To hide the green part, set the value to 'none'.
            greenTo: 100,                       // The highest value for a range marked by a green color. To hide the green part, set the value to 'none'.

            yellowColor: '#FF9900',             // The color to use for the yellow section, in HTML color notation.
            yellowFrom: 75,                     // The lowest value for a range marked by a yellow color. To hide the yellow part, set the value to 'none'.
            yellowTo: 90,                       // The highest value for a range marked by a yellow color. To hide the green part, set the value to 'none'.

            redColor: '#DC3912',                // The color to use for the red section, in HTML color notation.
            redFrom: 'none',                    // The lowest value for a range marked by a red color. To hide the red part, set the value to 'none'.
            redTo: 'none',                      // The highest value for a range marked by a red color. To hide the green part, set the value to 'none'.

            minorTicks: 5,                      // The number of minor tick section in each major tick section.
            majorTicks: 5                       // Labels for major tick marks. The number of labels define the number of major ticks in all gauges. The default is five major ticks, with the labels of the minimal and maximal gauge value.
        };


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