SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using jquery SVG plugin

    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>

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •