[SalesForce] Dynamic Gauge Breakpoint

I actually had to take Hraefn's advice. I went with jQuery to accomplish this as opposed to visualforce charting. I used a nice jQuery library chartJs, which can be found here

http://chartjs.devexpress.com/

Here is the basic code I used. Someone could easily adjust this to fit there data

VF

<apex:page controller="NPSScoreController">

    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.2.custom/js/jquery-1.9.1.js')}" />    
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.10.2.custom/js/d3.v3.js')}" />
    <apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" />
    <apex:includeScript value="{!URLFOR($Resource.ChartJs, 'Lib/js/knockout-2.2.1.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.ChartJs, 'Lib/js/globalize.min.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.ChartJs, 'Lib/js/dx.chartjs.js')}" />



    <script>
    var j$ = jQuery.noConflict();

    //On Page load
    j$(function() {

        createBullet('OverallContainer', 'Total NPS Score', '{!score.Total_NPS_Score__c}');
        createBullet('EpicContainer', 'Epic Score', '{!score.Epic_NPS_Score__c}');
        createBullet('CernerContainer', 'Cerner Score', '{!score.Cerner_NPS_Score__c}');
        createBullet('RemContainer', 'Remediation Score', '{!score.Remediation_NPS_Score__c}');
        createBullet('DeployedContainer', 'Deployed Score', '{!score.Deployed_NPS_Score__c}');
        createBullet('LargestContainer', 'Largest Score', '{!score.Largest_NPS_Score__c}');
        createBullet('TierBContainer', 'Tier B Score', '{!score.TIER_B_NPS_Score__c}');
        createBullet('NewTierBContainer', '2013 New Tier B Score', '{!score.New_Tier_B_NPS_Score__c}');
        createBullet('NewTierAContainer', '2013 New Tier A Score', '{!score.New_Tier_A_NPS_Score__c}');
        createBullet('EMEARemediationContainer', 'EMEA Remediation Score', '{!score.EMEA_Remediation_NPS_Score__c}');
        createBullet('EMEADeploymentContainer', 'EMEA Deployment Score', '{!score.EMEA_Deployment_NPS_Score__c}');

    });

    function createBullet(divId, title, nps){
        j$("#" + divId).dxLinearGauge({
            scale: {
                startValue: -20,
                endValue: 50,
                label: {
                    indentFromTick: 7
                },
                majorTick: {
                    showCalculatedTicks: false,
                    customTickValues: [0, 17, 30, 50],
                    color: "#000"           
                }
            },

            title: {
                text: title,
                font: {
                    color:'#000',
                    weight:900,
                    size: 20
                }
            },

            rangeContainer: {
                backgroundColor: "none",
                ranges: [
                    {
                        startValue: -20,
                        endValue: 17,
                        color: "red"
                    },
                    {
                        startValue: 17,
                        endValue: 30,
                        color: "orange"
                    },
                    {
                        startValue: 30,
                        endValue: 50,
                        color: "green"
                    }
                ]
            },

            //needles: [{ value: nps, color: "#000"}],      
            markers: [{ value: nps, color: "#000"}],        

        });
    }

    </script> 
        <div class="Page-Wrap">
            <div class="First-Line">
                <div id="OverallContainer" class="Container"></div> 
            </div>
            <div class="Lower-Line">
                <div class="Lower-Left">
                    <div class="Container-Wrapper">
                        <div id="EpicContainer" class="Container"></div> 
                    </div>
                    <div class="Container-Wrapper">
                        <div id="CernerContainer" class="Container"></div> 
                    </div>
                    <div class="Container-Wrapper">
                        <div id="RemContainer" class="Container"></div>
                    </div>
                    <div class="Container-Wrapper">
                        <div id="NewTierAContainer" class="Container"></div>
                    </div>  
                    <div class="Container-Wrapper">
                        <div id="NewTierBContainer" class="Container"></div>
                    </div>
                </div>  

                <div class="Lower-Right">
                    <div class="Container-Wrapper">
                        <div id="DeployedContainer" class="Container"></div>
                    </div>
                    <div class="Container-Wrapper">
                        <div id="LargestContainer" class="Container"></div>
                    </div>  
                    <div class="Container-Wrapper">
                        <div id="TierBContainer" class="Container"></div>
                    </div>
                    <div class="Container-Wrapper">
                        <div id="EMEARemediationContainer" class="Container"></div>
                    </div>
                    <div class="Container-Wrapper">
                        <div id="EMEADeploymentContainer" class="Container"></div>
                    </div>      
                </div>      
            </div>   
        </div>

    </apex:page>

Controller

public class NPSScoreController {

    public CA_NPS_Score__c score                        {get;set;}

    public NPSScoreController(){
        score = getScore();
    }

    public List<Schema.FieldSetMember> getFields() {
        return SObjectType.CA_NPS_Score__c.FieldSets.Dashboard_Fields.getFields();
    }

    private CA_NPS_Score__c getScore() {
        String query = 'SELECT ';
        for(Schema.FieldSetMember f : SObjectType.CA_NPS_Score__c.FieldSets.Dashboard_Fields.getFields()) {
            query += f.getFieldPath() + ', ';
        }
        query += 'Name FROM CA_NPS_Score__c Where Most_Current__c = true';
        return Database.query(query);
    }
}

And this is what it came out looking like...

Have you tried the Visualforce Charting components? There's no funnel chart, but there are lots of other good chart types. You feed these charts whatever data you want (from a SOQL query of your choosing) and voila. They work very well for our needs.

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_charting.htm