angular-google-chart
Version:
Google Chart Tools AngularJS Directive Module
80 lines (63 loc) • 2.9 kB
HTML
<div class="col-xs-5">
<h2>Live edit</h2>
<form class="form-horizontal" role="form">
<div class="form-group ">
<label class="control-label"
for="chart-data-rows-1-3-v">February server sale units</label>
<input class="form-control" type="number" min="0" max="100" ng-model="chart.data.rows[1].c[3].v"
id="chart-data-rows-1-3-v"/>
</div>
<div class="form-group">
<label class="control-label"
for="chart-options-vAxis-gridlines-count">Number of grid lines</label>
<input class="form-control" type="number" min="0" max="100" ng-model="chart.options.vAxis.gridlines.count"
id="chart-options-vAxis-gridlines-count"/>
</div>
<div class="form-group">
<label for="chartType">Chart type</label>
<select class="form-control" id="chartType" ng-model="chart.type" ng-change="chartSelectionChange()">
<option value="AreaChart">AreaChart</option>
<option value="PieChart">PieChart</option>
<option value="ColumnChart">ColumnChart</option>
<option value="LineChart">LineChart</option>
<option value="Table">Table</option>
<option value="BarChart">BarChart</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label for="hideServer">
<input id="hideServer" type="checkbox" ng-model="hideServer"
ng-change="selectionChange()"/>
Hide Server</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label for="htmlTooltip" ng-show="chart.type!='Table'">
<input id="htmlTooltip" type="checkbox" ng-model="chart.options.tooltip.isHtml"
ng-change="htmlTooltip()"/>
HTML Tooltip
</label>
</div>
</div>
<div class="form-group" ng-show="chart.type=='Table'">
<label for="chartType">Format</label>
<ul class="inputs-list">
<li ng-repeat="format in formatCollection">
<button class="btn primary" ng-click="toggleFormat(format)">{{format.name}}</button>
</li>
</ul>
</div>
</form>
</div>
<div class="col-xs-7">
<div google-chart chart="chart" style="{{cssStyle}}" on-ready="chartReady()"></div>
<!-- explicit close of tag seems to be necessary -->
</div>
<div class="col-xs-12">
<h2>Usage</h2>
<pre ng-non-bindable><div google-chart chart="chartObject" style="{{cssStyle}}"></div></pre>
<h2>Setup</h2>
<pre>$scope.chartObject = {{chart|json}}</pre>
</div>