1 / 27

Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements

Learn how to create interactive graphs using HTML 5 canvas elements in SAS. Understand canvas elements, compatibility, basic setup, coordinate system, coding in SAS, drawing lines, labels, shapes, and more.

dechols
Download Presentation

Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements Edwin J. van Stein Astellas Pharma Global Development

  2. Contents • What is a canvas element? • Compatibility • Getting started • Basic set-up • Coordinate system • Coding it in SAS • Identifying the canvas • Drawing lines, labels, shapes with straight lines and pie slices • Additional drawing methods • Additional attributes • Additional reading

  3. What is a canvas element? • Canvas \'kan-vəs\ : a piece of cloth backed or framed as a surface for a painting; also : the painting on such a surface • Part of HTML 5 specifications • Allows for dynamic scriptable rendering of 2D shapes and bitmap images • Has a height, width and id; no border or contents • Contents is added using JavaScript

  4. Compatibility • Native support latest versions: • Mozilla Firefox • Google Chrome • Safari • Opera • Internet Explorer 9 • Support in older versions of Internet Explorer using JS library (ExplorerCanvas), no plug-ins needed

  5. Basic set-up <html><head> <script type="text/javascript"> function drawit() { // JavaScript to draw on canvas goes here } </script> </head> <body onLoad="drawit();"> <canvas id="graph" width="601" height="401"> </canvas> </body></html>

  6. Canvas coordinate system • Y coordinate inverted compared to annotate in SAS

  7. Canvas coordinate system (cont.) • Drawing lines with a width of 1 pixel

  8. Coding it in SAS • DATA step writing to HTML file or _webout data canvas; file "C:\temp\pie.html"; set wins end=eof; if _n_=1 then do; end; if eof then do; end; run;

  9. Identifying the canvas • JS needs to know which canvas to draw on put 'var canvas = document.getElementById("graph");'; • JS needs to know which context of the canvas to use put 'var context = canvas.getContext("2d");';

  10. Drawing lines put 'context.beginPath();'; put 'context.moveTo(.5+' x1 +(-1) ',.5+' y1 +(-1) ');'; put 'context.lineTo(.5+' x2 +(-1) ',.5+' y2 +(-1) ');'; put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();';

  11. Drawing lines (result)

  12. Drawing labels put 'context.font="bold 16px sans-serif";'; put 'context.textBaseline="top";'; put 'context.textAlign="center";'; put 'context.fillStyle="black";'; put 'context.fillText("' text +(-1) '",.5+300,.5+25);';

  13. Drawing labels (result)

  14. Drawing shapes with straight lines put 'context.beginPath();'; put 'context.moveTo(.5+' x +(-1) '+' size +(-1) '/2,.5+' y +(-1) '+' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '+' size +(-1) '/2,.5+' y +(-1) '-' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '-' size +(-1) '/2,.5+' y +(-1) '-' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '-' size +(-1) '/2,.5+' y +(-1) '+' s +(-1) '/2);'; put 'context.closePath();';

  15. Drawing shapes with straight lines (cont.) put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();'; put 'context.fillStyle="red";'; put 'context.fill();';

  16. Drawing shapes with straight lines (result)

  17. Drawing pie slices put 'context.beginPath();'; put 'context.moveTo(300,250);'; put 'context.arc(300,250,100,0,0.076*Math.PI*2,false);'; put 'context.closePath();'; • arc(x, y, radius, start angle, end angle, anti clockwise boolean);

  18. Drawing pie slices (cont.) put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();'; put 'context.fillStyle="red";'; put 'context.fill();';

  19. Drawing pie slices (result)

  20. Additional drawing methods • strokeText() • quadraticCurveTo(), bezierCurveTo() and arcTo()

  21. Additional drawing methods (cont.) • createLinearGradient(), createRadialGradiant() and addColorStop() • createPattern() • drawImage()

  22. Additional attributes • globalCompositeOperation

  23. Additional attributes (cont.) • lineCap: butt (default), round or square • lineJoin: round, bevel or miter (default) • miterLimit

  24. Additional attributes (cont.) • globalAlpha • shadowOffsetX, shadowOffsetY, shadowBlur and shadowColor

  25. Additional reading • In the paper: • Mouse over events • Multiple canvas graphs on a page • sasCommunity.org • The presentation • The paper • Example code

  26. Questions? nl.linkedin.com/in/ejvanstein ejvanstein@gmail.com

More Related