Gauge charts in Skuid

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Salesforce has the gauge chart capability, which allows us to set revenue goals and see where our org's progress is compared to the goals we set. I can't seem to find a gauge chart option in Skuid (potential idea?). If other people have an idea for a work-around to incorporate some sort of goal-setting capability in the chart components, I would love to hear your ideas! Thanks!
Photo of Megan Minahan

Megan Minahan

  • 726 Points 500 badge 2x thumb

Posted 3 years ago

  • 2
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Perhaps graphing a "percent to goal" field that takes the current achieved amount divided by the goal amount expressed as a percent......
Photo of Megan Minahan

Megan Minahan

  • 726 Points 500 badge 2x thumb
Hmm that's a good idea! I tried creating a ui-only field for the goal and the percent of attainment, however, im not positive the percentage is working. Do you know if there is anyway to show the sumAmount on top of the goal to show the comparison? Or do you have any other ideas on how to graph the comparison. Here is my xml:

<skuidpage showsidebar="false" showheader="true" tabtooverride="Account" unsavedchangeswarning="" personalizationmode="server">   <models>
      <model id="OppsClosed" limit="" query="true" createrowifnonefound="false" adapter="" type="aggregate" sobject="Opportunity">
         <fields>
            <field id="Goal" uionly="true" displaytype="FORMULA" label="Goal" precision="9" scale="2" defaultValue="3280000" readonly="true" returntype="DOUBLE">
               <formula>5000000</formula>
            </field>
            <field id="PercentOfGoal" uionly="true" displaytype="FORMULA" label="% of Goal" readonly="true" returntype="PERCENT" precision="9" scale="1">
               <formula>{{{sumAmount}}}</formula>
            </field>
            <field id="Amount" name="sumAmount" function="SUM"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="THIS_MONTH" enclosevalueinquotes="false" field="CloseDate"/>
            <condition type="fieldvalue" value="Closed Won" enclosevalueinquotes="true" field="StageName"/>
         </conditions>
         <actions/>
         <groupby method="simple">
            <field id="CloseDate" name="cmCloseDate" function="CALENDAR_MONTH"/>
         </groupby>
      </model>
   </models>
   <components>
      <richtext multiple="true" uniqueid="sk-2QM6Lx-794" model="OppsClosed">
         <contents>&lt;p style="font-size: 13.3px; text-align: center; background-color: rgb(255, 165, 0);"&gt;&lt;span style="font-family: tahoma, geneva, sans-serif;"&gt;&lt;span style="color: rgb(255, 255, 255);"&gt;&lt;span style="font-size: 24px;"&gt;Goal MTD % Attained:&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="color: rgb(255, 255, 255); font-family: tahoma, geneva, sans-serif; font-size: 24px; text-align: center; background-color: rgb(255, 165, 0);"&gt;{{PercentOfGoal}}&lt;/span&gt;&lt;/p&gt;
</contents>
      </richtext>
      <skuidvis__chart model="OppsClosed" maintitle="Goal MTD" type="column" uniqueid="sk-2QHpf_-616">
         <dataaxes>
            <axis id="axis1" minvalue="0"/>
         </dataaxes>
         <categoryaxes>
            <axis id="categories" categorytype="template" field="sumFirstYearValueARRc" template="cmCloseDate"/>
         </categoryaxes>
         <serieslist>
            <series valuefield="Goal" splittype="none" modelId="OppsClosed" aggfunction="sum"/>
            <series valuefield="sumAmount" splittype="none" modelId="OppsClosed" aggfunction="sum"/>
         </serieslist>
         <colors/>
         <legend layout="horizontal" halign="center" valign="bottom"/>
         <allowedtypes>
            <type>line</type>
            <type>spline</type>
            <type>area</type>
            <type>areaspline</type>
            <type>column</type>
            <type>bar</type>
         </allowedtypes>
      </skuidvis__chart>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I have a love-hate relationship with UI only fields. I can't seem to get them to work the way I want. many times. I have much better luck with Salesforce fields. You can use roll up fields to aggregate current and goal amounts of children records on a parent and use saesforce formula fields to calculate current/goal = %complete. Skuid Charts have a lot of options. It may take some work to get them to display your data the way you want it.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
In Skuid,  I do a side by side column chart.  The two columns are series built from different models.  One model is the goal number.  The other model is the actual number.  Its not a gague, but its an effective display of progress.  
Photo of Josh Merritt

Josh Merritt

  • 918 Points 500 badge 2x thumb
I also use this method for some charts and stack the columns, using a UI-Only field to hold the goal number and another one to calculate the difference between the current result and the goal (if the total < goal). Then I stack them in the proper order to make it look like this:



I went a little further and added a third UI field which calculates if the total is greater than the goal and made it be a different color to indicate when we exceeded our goal. I created custom labels for the charts to display the goal total, but you can use the standard label functionality if you're okay displaying the amount to reach the goal instead. 
Photo of Josh Merritt

Josh Merritt

  • 918 Points 500 badge 2x thumb
It isn't exactly a gauge chart, but I built these cumulative area-spline charts to show our day by day progress towards a monthly goal. It's also a pretty hack-y way to do this, so someone else might be able to simplify/improve it.



Like Rob said, I use two models to handle the two data series. To create the goal, I have a custom object in salesforce, "Goals", that holds the amount, date, and type of goal, which I create each month using Demand Tools. I then use a javascipt snippet to accumulate my daily total and render the chart. This code is only set up to handle a chart with 2 series, where the first series is the goal and the second is the daily total. 

var chartObj = arguments[0],
	$ = skuid.$;

if (seriesCount > 0) {
    var cumulative = [];
    var temp = 0;
    var today = new Date();
    var dayInMonth = today.getDate();
    
// starting with the second series, add a cumulative total for each day of the month so far
    for (var i = 0; i < dayInMonth; ++i) {
        temp += chartObj.series[1].data[i].y;
        }
        cumulative.push(temp);
    }
    
    var newSeries = {
        id: 'Cumulative',
        name: 'Month-to-date Total:',
        data: cumulative,
        type: 'areaspline',
        xAxis: chartObj.series[0].xAxis,
        yAxis: chartObj.series[0].yAxis,
    };
    
// replace second series with new cumulative series
    chartObj.series[1] = newSeries;
    
//    console.log(chartObj);
       
}