Teaching Guide

Elvenware Logo


Angular Chart Organic

This is inpart an in class exercise. Using Yeoman, Angular, Angular-Charts, Angular-Bootstrap create a web application that:

Reference: http://bit.ly/angular-yeoman

Your application should, at times, look something like this:


Select DropDown

When the user selects an item from the dropdown, the chart changes its type. For instance, it changes from PieChart to BarChart. You can set up the select control like this:

$scope.chartSelect = {
    "type": "select",
    "name": "Service",
    "value": "PieChart",
    "values": [ "PieChart", "BarChart", "ColumnChart", 
         "AreaChart", "LineChart", "Table"]

The HTML should look like this:

<select ng-model="chartSelect.value" 
     ng-options="v for v in chartSelect.values" ng-change="chartTypeUpdate()">