Using jquery SVG plugin

**kreut** · Mar 10, 2011 16:52

Hello!

I'm hoping to integrate the jquery SVG plugin into my website(Keith Wood) but I can't seem to get any of the plots to be visible. The exact code that I have below; also I should note that I get the error "TypeError: Result of expression '('#svgplot').svg' [undefined] is not a function." Any help on getting me started would be appreciated: it looks really powerful and easy to use once installed correctly.

Thank you,

Eric

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
@import "jquery/jquery.svg.css";

#svgplot { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript" src="jquery/jquery.svgplot.js"></script>
<script type="text/javascript">

('#svgplot').svg({onLoad: PlotIt});
function PlotIt(svg){
      
svg.plot.noDraw().title('Functions', 'blue').addFunction('sine', Math.sin, 'blue', 3).areaFormat('ivory', 'gray'). 
    gridlines({stroke: 'gray', strokeDashArray: '2,2'}, 'gray'). 
    status(setStatus);
     }

</script>
</head>
<body>


<div id="svgplot"></div>

</body>
</html>

**oz1ne** · Apr 9, 2011 19:51

Working example of SVG Plugin in standalone SVG doc | jQuery Plugins

**kbwood** · May 17, 2011 21:57

You need to apply the jQuery function - $ - to your selector. Also you should enclose your code in a document.ready callback to ensure that the DOM is loaded before trying to access it. Finally, you have requested to defer drawing the plot (noDraw) but have never asked it to render (redraw).

Code:

<script type="text/javascript">
$(function() { // Shorthand for $(document).ready(function() {
    $('#svgplot').svg({onLoad: PlotIt});
});

function PlotIt(svg) {
    svg.plot.noDraw().title('Functions', 'blue').
        addFunction('sine', Math.sin, 'blue', 3).areaFormat('ivory', 'gray'). 
        gridlines({stroke: 'gray', strokeDashArray: '2,2'}, 'gray').redraw();
}
</script>

User Tag List

Thread: Using jquery SVG plugin

Thread Tools

Display

Using jquery SVG plugin

Bookmarks

Bookmarks

Posting Permissions