Using jquery SVG plugin

JavaScript
1

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

<!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>
2

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

3

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).

<script type="text/javascript">
$(function() { // Shorthand for $(document).ready(function() {
    [B]$[/B]('#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').[B]redraw()[/B];
}
</script>