Source

htraf-packaging / htraf / examples20 / index.html

Full commit
<!DOCTYPE html>
<html>
<head>
    <title> HTRAF Demo </title>
    <script type="text/javascript" 
            src="../htraf.js"
            data-htsql-version="2"
            data-htsql-prefix="/@">
    </script>
    <link rel="stylesheet" type="text/css" href="../css/htraf-02.css"/>
</head>
<body>
    <h3>Select a School</h3>
    <select id="school"
        data-htsql="/school{code, name}?exists(department)">
        <option></option>
    </select>
    <div style="width: 500px; height: 350px;" 
        data-htsql="/program{title, count(student)}
                    ?school_code=$school&count(student)>0" 
        data-ref="school"
        data-type="pie"
        data-widget="chart"
        data-title="Percent of Students by Program"></div>
    <h3>Departments</h3>
    <p>Filter by name: <input id="department_name"/></p>
    <table id="department" data-hide-column-0="yes" 
        data-htsql="/department{code, name, school.name}
                    ?school_code=$school&name~$department_name"
        data-ref="school department_name">
    </table>
    <p>
        The selected department: 
        <em data-htsql="/department{name}?code=$department"
            data-ref="department"></em> <br/>
        The number of courses in the selected department: 
        <strong data-htsql="/department{count(course)}?code=$department"
                data-ref="department">
        </strong>
    </p>
    <h3>Courses</h3>
    <table id="course" data-htsql="/course?department_code=$department"
           data-ref="department">
    </table>
</body>
</html>