samples/table-chart.html

<!DOCTYPE html>
<html>
<head>
<title>Web Components Example: Table-based Charts</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
<script src="../assets/scripts/bug-assist.js"></script>
<script src="../assets/scripts/prettify.js"></script>
<meta name="bug.blocked" content="14956">
<meta name="bug.short_desc" content="[Samples]: ">
<meta name="bug.product" content="WebAppsWG">
<meta name="bug.component" content="Component Model">
</head>
<body>
<header>
<ul>
    <li><a href="../samples/index.html">Samples</a></li>
    <li><a href="../explainer/index.html">Explainer</a></li>
    <li><a href="../spec/shadow/index.html">Shadow DOM Spec</a></li>
    <li><a href="../spec/templates/index.html">HTML Templates</a></li>
</ul>
<h2>Web Components Example</h2>
<h1>Table-based Charts</h1>
</header>
<pre class="prettyprint"><code>
&lt;element extends=&quot;table&quot; name=&quot;x-table-chart&quot; constructor=&quot;TableChart&quot;&gt;
    &lt;script&gt;

        this.lifecycle({
            created: function(shadowRoot) {
                this._canvas = shadowRoot.firstElementChild;
                this.draw();
            },
            inserted: function() { this._visible = true; },
            removed: function() { this._visible = false; }
        });

        TableChart.prototype.draw = function()
        {
            if (!this._visible)
                return;

            var type = this.chartType;
            var color = this.chartColor;
            var canvas = this._canvas;

            // Read the table data and draw the graph on canvas.
            // ...

            this.dispatchEvent(new Event(&#x27;draw&#x27;));
        }

        this.reflectAttribute(&#x27;x-chart-type&#x27;, &#x27;chartType&#x27;, TableChart.prototype.draw);
        this.reflectAttribute(&#x27;x-chart-color&#x27;, &#x27;chartColor&#x27;, TableChart.prototype.draw);
        this.setupEvent(&#x27;draw&#x27;);

    &lt;/script&gt;
    &lt;template&gt;
        &lt;canvas&gt;&lt;/canvas&gt;
    &lt;/template&gt;
&lt;/element&gt;
</code></pre>
</body>
</html>