New to Jade. Wondering why chart isn't showing?

Question

So, my code compiles without error and the list part displays without any trouble. The code for the chart however doesn't show anything (The part inside of the .script where you see var tp.) The HTML output simply shows no output whatsoever for the chart. All else appears to be valid.

extends layout
doctye html
html(lang='en')
  head
    script(language='javascript',type='text/javascript',src='jquery.min.js')
    script(language='javascript',type='text/javascript',src='jquery.jqplot.min.js')
    link(rel='stylesheet',type='text/css',href='jquery.jqplot.css')

   div(id='chartdiv',style='height:400px;width:700px;')

  body
    script.
        var tp = [95,85,73,10,0,55,80,118,45,47,60,65,36,78,99];
        $.jqplot('chartdiv',  [[[0, 15],[10,78]],[[0, tp[0]],[1,tp[1]],[2,tp[2]],
        [3,tp[3]],[4,tp[4]],[5,tp[5]],[6,tp[6]],[7,tp[7]]]],
        { title:'Temperatures',
          axes:{xaxis:{label:'Time (seconds)', min:0, max:15, numberTicks:16}, 
          yaxis:{label:'Temperature (F)', min:0, max:120, numberTicks:13}},
      series:[{color:'#5FAB78'},{color:'#000077'}],
      legend:{show:true, labels:['Cats','Dogs']}
    });
  block content
    h1.
        User List
    ul
        each user, i in userlist.reverse()
            li
                <p> TIME #{user.wd1} WD #{user.wd2} WS #{user.wd3} WS1HR #{user.wd4}     
                    TEMP #{user.wd5} CHILL #{user.wd6} ALT #{user.wd7} 
                    HUM #{user.wd8} PRESS #{user.wd9} SOIL #{user.wd10} 


  meta(http-equiv='refresh', content='5') 

Answer 1

there are a lot of problems in your code, see what works for me and then I go over the list of problems:

extends layout
doctype html
html(lang='en')
  head
    script(language='javascript',type='text/javascript',src='jquery.min.js')
    script(language='javascript',type='text/javascript',src='jquery.jqplot.min.js')
    link(rel='stylesheet',type='text/css',href='jquery.jqplot.css')
  body
    script.
      $(document).ready(function(){
        var tp = [95,85,73,10,0,55,80,118,45,47,60,65,36,78,99];
        $.jqplot('chartdiv',  [[[0, 15],[10,78]],[[0, tp[0]],[1,tp[1]],[2,tp[2]],
        [3,tp[3]],[4,tp[4]],[5,tp[5]],[6,tp[6]],[7,tp[7]]]],
        { title:'Temperatures',
          axes:{xaxis:{label:'Time (seconds)', min:0, max:15, numberTicks:16}, 
          yaxis:{label:'Temperature (F)', min:0, max:120, numberTicks:13}},
          series:[{color:'#5FAB78'},{color:'#000077'}],
          legend:{show:true, labels:['Cats','Dogs']}
         });
      });
  block content
    div(id='chartdiv',style='height:400px;width:700px;')
    h1.
      User List
    ul
      each user, i in userlist.reverse()
        li
            <p> TIME #{user.wd1} WD #{user.wd2} WS #{user.wd3} WS1HR #{user.wd4}     
                TEMP #{user.wd5} CHILL #{user.wd6} ALT #{user.wd7} 
                HUM #{user.wd8} PRESS #{user.wd9} SOIL #{user.wd10} 

  meta(http-equiv='refresh', content='5') 

1. You missed a p in doctype
2. Your div for your chart was above the body tag.
3. Your script ist wrong, you missed to begin with $(document).ready(function(){ and then end with another });

With the code from above, your chart should be showing, if you embedded your *.js and *.css right!