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…
