Home
As of today the <awesomechart type="pie" data="data"></awesomechart> directive is using the 'data' attribute to specify an angular.js expression that must evaluate to an array of the following form:
$scope.data = [
{label:'Chrome', value:39.3},
{label:'Firefox', value:35.2},
{label:'IE', value:18.1},
{label:'Safari', value:4.3},
{label:'Opera', value:2.2}
];
This might be OK if we've got already a data structure in the form presented above but in reality we might want to create a chart from an existing data structure where we would like to use existing properties as labels / values (or even compute a label / value on the fly based on existing properties). To better illustrate this point let's assume we've got a structure like below:
$scope.data = [
{browser:'Chrome', usage:39.3},
{browser:'Firefox', usage:35.2},
{browser:'IE', usage:18.1},
{browser:'Safari', usage:4.3},
{browser:'Opera', usage:2.2}
];
and we would like to create a chart from this structure without doing extensive data conversion.
The idea would be to make the 'data' attribute to support expression in the following form: (label, value, color) for item in items, where:
- items - a data structure to be iterated over
- item - a user defined variable holding a current collection item
- label, value, color - angular.js expressions evaluating to a label, value and color to be used in a chart
Example: <awesomechart type="pie" data="(item.browser, item.usage, 'red') for item in data"></awesomechart>
Another thing to consider is the fact that people might want to calculate color of a chart item based on a label, value or simply a position of an item in an array. To cater for this need it would be nice to introduce the $index variable which would allow to write expressions like this:
(item.browser, item.usage, getColor($index)) for item in data