JS location for Custom Component

Ha!  I found the answer in another post soon after posting my question.  I was able to move my javascript from the vfPage to runtime.js via the pageload function (see below).  Now I need to tie the component to the skuid data model.  That should be fun.

(function(skuid){    var $ = skuid.$;
    // Register a snippet to run
    skuid.snippet.registerSnippet(‘DrawGauge’,function(DrawGauge){
        var c = document.getElementById(“myCanvas”);
        var ctx = c.getContext(“2d”);

        // Draw the pill gauge
        ctx.beginPath();
        ctx.moveTo(95, 140);
        ctx.lineTo(250, 140);
        ctx.quadraticCurveTo(290, 140, 290, 170);
        ctx.lineTo(290, 170);
        ctx.quadraticCurveTo(290, 210, 250, 210);
        ctx.lineTo(95, 210);
        ctx.quadraticCurveTo(55, 210, 55, 180);
        ctx.lineTo(55, 170);
        ctx.quadraticCurveTo(55, 140, 95, 140);
        ctx.lineWidth = 3;
        ctx.strokeStyle = ‘#73B9E6’;
        ctx.fillStyle = “#F7F7F7”;
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // Fill the pill gauge with proposed revenue
        ctx.beginPath();
        ctx.moveTo(95, 140);
        ctx.lineTo(120, 140);
        ctx.quadraticCurveTo(155, 140, 155, 170);
        ctx.lineTo(155, 180);
        ctx.quadraticCurveTo(155, 210, 115, 210);
        ctx.lineTo(95, 210);
        ctx.quadraticCurveTo(55, 210, 55, 180);
        ctx.lineTo(55, 170);
        ctx.quadraticCurveTo(55, 140, 95, 140);
        ctx.fillStyle = “#73B9E6”;
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // Draw target revenue line
        ctx.beginPath();
        ctx.strokeStyle = ‘black’;
        ctx.moveTo(185, 140);
        ctx.lineTo(185, 220);
        ctx.stroke();

        // Display dollar figures
        ctx.fillStyle = ‘black’;
        ctx.font = ‘10pt Calibri’;
        ctx.fillText(‘Current Revenue’, 60, 115);
        ctx.fillText(‘$102,495.22’, 60, 130);
        ctx.fillText(‘Presc Revenue’, 200, 115);
        ctx.fillText(‘$204,990.44’, 210, 130);
        ctx.font = ‘11pt Calibri’;
        ctx.fillText(‘Proposed Revenue’, 130, 170);
        ctx.fillText(‘Tgt Revenue’, 170, 232);
        ctx.font = ‘bold 12pt Calibri’;
        ctx.fillText(‘$144,315.94’, 143, 187);
        ctx.fillText(‘$153,742.88’, 160, 248);
    });
    // Run the snippet initially on page load
    $(‘.nx-page’).one(‘pageload’,function(){
        skuid.snippet.getSnippet(‘DrawGauge’)();
    });
})(skuid);

Hi Jason,

You may want to look at Skuid Model Actions as an option to refresh the gauge whenever the model changes:

http://help.skuidify.com/m/models-conditions-filters/l/102651-everything-you-need-to-know-about-skui….

Regards,
Irvin

My component is now tied to the skuid data model and updating on model change events.  This post had the recipe, https://community.skuid.com/t/trigger-custom-component-on-data-model-update which is also in that doc link you sent.  Thanks Irvin.  My component is almost as cool as the ones that come out of the box with Skuid!  Now the fun part…I am going to add some cool animation transitions…