Sample HTML Page with Chart and TableΒΆ

import os
import sqlite3
from string import Template

from gviz_data_table import Table, encoder


def data():
    folder = os.path.split(__file__)[0]
    db = sqlite3.connect(os.path.join(folder, "sample.db"))
    c = db.cursor()
    c.execute("SELECT name, salary FROM employees")
    cols = [dict(id=col[0], label=col[0].capitalize(), type=col[1])
            for col in c.description]
    # sqlite3 unfortunately does not provide type information
    cols[0]['type'] = str
    cols[1]['type'] = float

    t = Table(cols)
    for r in c.fetchall():
        name, value = r
        label = f"${value}"
        t.append([name, (value, label)])

    return encoder.encode(t)


template = Template("""
<html>

<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
</head>

<body>
<script>
      google.load("visualization", "1", {packages:["corechart", "table"]});

      var data = $data // our data table

      google.setOnLoadCallback(drawChart);
      function drawChart() {

      var chart_data = new google.visualization.DataTable(data);
      var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
      chart.draw(chart_data);
      }

      google.setOnLoadCallback(drawTable);
      function drawTable () {
      var table_data = new google.visualization.DataTable(data);
      var table = new google.visualization.Table(document.getElementById('table'));
      table.draw(table_data);
      }
</script>

<h2>Sample Chart</h2>

<div id="chart"></div>

<h2>Sample Table</h2>
<div id="table"></div>

</body>

</html>
""")

def save():
    with open("chart.html", "w") as f:
        f.write(template.safe_substitute(data=data()))

if __name__ == "__main__":
    save()

This produces a chart and table like this:

Sample Chart

Sample Table