Problem using jquery.visualize

Problem using jquery.visualize

Hi,

I have a problem with jquery.visualize (using jquery.js 1.4.2. and the jquery.visualize plugin). The problem I have is that the graph is being generated correctly but that the value contained in the table (which are being used to generate the graph) are being displayed all over the page + the html table is being displayed at the top of the page. I've attached a screenshot to illustrate the problem. I've tried a bunch of things, but I don't seem to be able to

I'd appreciate any tips since I seem to be stuck with this one.

Greetings/Thanks
Robert

Below is the HTML I use to generate the page:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQyery visualize test</title>
    <meta name="description" content="Site description" />
    <meta name="keywords" content="Product Statistics:" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <script type="text/javascript" src="../pnjavascript/jquery.js"></script>
    <script type="text/javascript" src="../pnjavascript/jquery.visualize.js"></script>
    </head>
    <body>
    <script type="text/javascript">
            $(document).ready(function() {
                    $('table.stats').visualize({
                            type: 'line',   // 'bar', 'area', 'pie', 'line'
                            width: '880px',
                            height: '240px',
                            colors: ['#6fb9e8', '#ec8526', '#9dc453', '#ddd74c']
                    });
            });
    </script>

    <table id="stats" class="stats">
      <caption>2009 Employee Sales by Department</caption>
      <thead>
        <tr>
          <td></td>
          <th scope="col">food</th>
          <th scope="col">auto</th>
          <th scope="col">household</th>
          <th scope="col">furniture</th>
          <th scope="col">kitchen</th>
          <th scope="col">bath</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Mary</th>
          <td>190</td>
          <td>160</td>
          <td>40</td>
          <td>120</td>
          <td>30</td>
          <td>70</td>
        </tr>
        <tr>
          <th scope="row">Tom</th>
          <td>3</td>
          <td>40</td>
          <td>30</td>
          <td>45</td>
          <td>35</td>
          <td>49</td>
        </tr>
      </tbody>
    </table>
    </html>