Source

htraf-packaging / htraf / demo / examples10 / chart.html

Full commit
<!DOCTYPE html>
<html>
<head>
    <title>Built-in chart demo</title>
    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
    <style>
        div.chart {
            height: 450px;
        }
    </style>
</head>
<body>
    <span data-htsql=""></span>
    <div class="chart" style="width: 750px;" 
         data-htsql="/program{degree^,count(student)}" 
         data-widget="chart"
         data-type="pie"></div>
    <div class="chart" 
        data-htsql="/student{dob.year()^,count(gender='f') as Females,
                            count(gender='m') as Males}" 
         data-widget="chart"
         data-type="bar"></div>
    <div class="chart" 
        data-htsql="/student{dob.year()^,count(gender='f') as Females,
                            count(gender='m') as Males}" 
        data-widget="chart"
        data-legend="nw"
        data-title="The same as above but 'stack' chart"
        data-type="stack"
        data-x-vertical="yes"></div>
    <strong>
        The same as above but 'line' chart with title/legend turned off
    </strong>
    <div class="chart" 
        data-htsql="/student{dob.year()^,count(gender='f') as Females,
                            count(gender='m') as Males}" 
        data-widget="chart"
        data-show-title="no"
        data-legend="no"
        data-type="line"></div>
    <div class="chart" 
        data-htsql="/student{dob^,count(gender='f') as Females,
                            count(gender='m') as Males}" 
        data-widget="chart"
        data-type="line"></div>

    <h2>Chart depends on $var</h2>
    <select id="school" data-htsql="/school"></select>
    <div class="chart" style="width: 450px;" 
         data-htsql="/program{degree^,count(student)}
         ?school=$school&count(student)>0" 
         data-ref="school"
         data-widget="chart"
         data-type="pie"></div>
    
</body>
</html>