Utilizing the module angular-chart.js to showcase charts in my Angular app. The app requires two types of charts: bar-chart and line-chart. Currently, the charts are separately defined in the HTML view.
Below is the current code snippet:
<canvas id="bar"
height="120"
ng-show="showBarChart"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-series="series">
</canvas>
<canvas id="line cvs-size"
height="120"
ng-show="showLineChart"
class="chart chart-line"
chart-data="dataChart"
chart-labels="labels"
chart-series="series">
</canvas>
The desired target code is as follows:
<canvas id="{{ chartType }}"
height="120"
ng-show="showChart"
class="chart chart-{{ chartType }}"
chart-data="dataChart"
chart-labels="labels">
</canvas>
Users can choose a query and upon clicking the button, the corresponding chart for the query will be displayed.
CrudService.getData(from, to).$promise.then(
function (resp) {
$scope.showChart = true;
$scope.chartType = 'bar';
angular.forEach(resp, function (item) {
$scope.labels.push(item.fname);
$scope.data.push(item.age);
});
$scope.dataChart = [$scope.data];
});
A request was successfully sent and a response was received. However, the chart is not being displayed on the view. I am unsure where the problem lies.