Skip to content

Commit

Permalink
Update coverage and doc for new chart- prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtblin
jtblin committed Aug 30, 2015
1 parent 5995928 commit 6eab366
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 73 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ adding the dependencies for Angular and Chart.js first:
There are 6 types of charts so 6 directives: `chart-line`, `chart-bar`, `chart-radar`, `chart-pie`,
`chart-polar-area`, `chart-doughnut`.

They all use mostly the same API (`[chart-]` indicates an optional prefix):
They all use mostly the same API (`[chart-]` indicates an optional but recommended prefix):

- `[chart-]data`: series data
- `[chart-]labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
Expand All @@ -41,7 +41,8 @@ They all use mostly the same API (`[chart-]` indicates an optional prefix):
- `[chart-]hover`: onmousemove event handler
- `[chart-]legend`: (default: `false`): show legend below the chart

*DEPRECATION WARNING*: Note that all attributes which do *not* use the `[chart-]` prefix are deprecated and may be removed in a future version.
*DEPRECATION WARNING*: Note that all attributes which do *not* use the `[chart-]` prefix are deprecated
and may be removed in a future version.

There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html).
Expand Down
149 changes: 80 additions & 69 deletions examples/charts.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
</div>
<div class="container-fluid">
<div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line chart-xl" data="data" options="options" labels="labels"></canvas>
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line chart-xl" chart-data="data"
chart-options="options" chart-labels="labels"></canvas>
<div class="header">
<h1>
Angular Chart
Expand Down Expand Up @@ -120,8 +121,8 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true"
click="onClick" hover="onHover" series="series"></canvas>
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true"
chart-click="onClick" chart-hover="onHover" chart-series="series"></canvas>
</div>
</div>
</div>
Expand All @@ -131,21 +132,21 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-line</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: x axis labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>series</code> (default: <code>[]</code>): series labels</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: x axis labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; data=&quot;data&quot;
labels=&quot;labels&quot; legend=&quot;true&quot; series=&quot;series&quot;
click=&quot;onClick&quot;&gt;
<pre><code data-language="html">&lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; chart-data=&quot;data&quot;
chart-labels=&quot;labels&quot; chart-legend=&quot;true&quot; chart-series=&quot;series&quot;
chart-click=&quot;onClick&quot; &gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
Expand Down Expand Up @@ -173,20 +174,21 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-bar</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: x axis labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: x axis labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>series</code> (default: <code>[]</code>): series labels</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;bar&quot; class=&quot;chart chart-bar&quot; data=&quot;data&quot;
labels=&quot;labels&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;bar&quot; class=&quot;chart chart-bar&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt;</code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
Expand All @@ -206,8 +208,8 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Bar Chart</div>
<div class="panel-body">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" series="series"
options="options"></canvas>
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options"></canvas>
</div>
</div>
</div>
Expand All @@ -217,7 +219,8 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Doughnut Chart</div>
<div class="panel-body">
<canvas id="doughnut" class="chart chart-doughnut chart-xs" data="data" labels="labels" legend="false"></canvas>
<canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
chart-labels="labels" chart-legend="false"></canvas>
</div>
</div>
</div>
Expand All @@ -227,19 +230,20 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-doughnut</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: series labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: series labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot; data=&quot;data&quot;
labels=&quot;labels&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
Expand All @@ -258,20 +262,21 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-radar</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: series labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: series labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>series</code> (default: <code>[]</code>): series labels</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;radar&quot; class=&quot;chart chart-radar&quot; data=&quot;data&quot;
labels=&quot;labels&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;radar&quot; class=&quot;chart chart-radar&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
Expand All @@ -290,7 +295,8 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Radar Chart</div>
<div class="panel-body">
<canvas id="area" class="chart chart-radar" data="data" labels="labels" click="onClick"></canvas>
<canvas id="area" class="chart chart-radar" chart-data="data"
chart-labels="labels" chart-click="onClick"></canvas>
</div>
</div>
</div>
Expand All @@ -300,7 +306,7 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Pie Chart</div>
<div class="panel-body">
<canvas id="pie" class="chart chart-pie chart-xs" data="data" labels="labels"></canvas>
<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data" chart-labels="labels"></canvas>
</div>
</div>
</div>
Expand All @@ -310,19 +316,20 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-pie</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: series labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: series labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;pie&quot; class=&quot;chart chart-pie&quot; data=&quot;data&quot;
labels=&quot;labels&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;pie&quot; class=&quot;chart chart-pie&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
Expand All @@ -341,19 +348,20 @@ <h1>Directives</h1>
<div class="settings">
<code>.chart-polar-area</code>
<ul>
<li><code>data</code>: series data</li>
<li><code>labels</code>: series labels</li>
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>click</code> (optional): onclick event handler</li>
<li><code>hover</code> (optional): onmousemove event handler</li>
<li><code>colours</code> (default to global colours): colours for the chart</li>
<li><code>chart-data</code>: series data</li>
<li><code>chart-labels</code>: series labels</li>
<li><code>chart-legend</code> (default: <code>false</code>): show legend below the chart</li>
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
<li><code>chart-click</code> (optional): onclick event handler</li>
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
<li><code>chart-colours</code> (default to global colours): colours for the chart</li>
</ul>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;polar-area&quot; class=&quot;chart chart-polar-area&quot; data=&quot;data&quot;
labels=&quot;labels&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;polar-area&quot; class=&quot;chart chart-polar-area&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
Expand All @@ -368,7 +376,7 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Polar Area Chart</div>
<div class="panel-body">
<canvas id="polar" class="chart chart-polar-area" data="data" labels="labels"></canvas>
<canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>
</div>
</div>
</div>
Expand All @@ -378,7 +386,8 @@ <h1>Directives</h1>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Chart</div>
<div class="panel-body">
<canvas id="base" class="chart chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
chart-labels="labels" chart-legend="true"></canvas>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
Expand All @@ -395,8 +404,9 @@ <h1>Directives</h1>
</div>
</tab>
<tab heading="Markup">
<pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-base&quot; chart-type=&quot;type&quot; data=&quot;data&quot;
labels=&quot;labels&quot; legend=&quot;true&quot;&gt;&lt;/canvas&gt; </code></pre>
<pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-base&quot; chart-type=&quot;type&quot;
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-legend=&quot;true&quot;&gt;
&lt;/canvas&gt; </code></pre>
</tab>
<tab heading="Javascript">
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
Expand Down Expand Up @@ -442,7 +452,8 @@ <h1>Reactive</h1>
<div class="panel panel-default">
<div class="panel-heading">Reactive Chart</div>
<div class="panel-body">
<canvas id="tables" class="chart chart-line" data="data" labels="labels" colours="colours"></canvas>
<canvas id="tables" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-colours="colours"></canvas>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 6eab366

Please sign in to comment.