Multiple Charts

[ageddesi]

Hi I am trying to create multiple charts on the same page.

e.g want to show 4 small charts for different currency pairs (stock charts)

I can not seem to get this to work. Any help would be truly helpful.

[GrantMStevens]

I actually didnt build in support for stock charts. I havent used them, not have I looked at the differences between those and rest of the charts.

As for creating multiple charts though, you can explicitly create multiple configuration objects (or extend a base), then create 4 different instances of the directive in your view. You can also use ngRepeat to iterate over a collection of configuration objects to create a variable number of charts.

[ageddesi]

Could you be as kind to provide a simple example of what you state above :)

This would help me a lot.

Thanks in advance

On Thu, Oct 22, 2015 at 3:22 PM, Grant notifications@github.com wrote:

I actually didnt build in support for stock charts. I havent used them, not have I looked at the differences between those and rest of the charts.

As for creating multiple charts though, you can explicitly create multiple configuration objects (or extend a base), then create 4 different instances of the directive in your view. You can also use ngRepeat to iterate over a collection of configuration objects to create a variable number of charts.

— Reply to this email directly or view it on GitHub https://github.com/GrantMStevens/amCharts-Angular/issues/30#issuecomment-150239512 .

[GrantMStevens]

I don't even have enough time to work on new features for this lib, let alone time to create an example for this. Sorry. Besides, these are basic Angular concepts. Look at ngRepeat and $scope.$watch() to get more information about the concepts i mentioned.

[huannews]

Hi, I am using ngRepeat to create multiple charts. I can see that the configuration objects has been updated (The data is from Firebase). But the charts won't display. You mentioned about $scope.$watch(). Maybe the charts won't display because I did not have $scope.$watch. How do I make this work with $scope.$watch()? Any more pinpoint would be very helpful. Thanks.

[huannews]

Here is my simple attempt to use $watch. But it did not work/show the chart. Do you see any trouble with the below?

$scope.showChart = true;
$scope.updateChart = function() {
    console.log($scope.showChart);
    $scope.showChart = !$scope.showChart;
};
$scope.$watch('showChart', function() {
        $scope.amOps = $scope.selectedGroups[0]['charts'];
        console.log($scope.amOps);
    }, true);

[huannews]

Here is my html:

<am-chart id="myFirstChart2" options="amOps" height="400" width="550"></am-chart>
<button class="btn btn-xs" ng-click="updateChart()"> </button>

[GrantMStevens]

The AmCharts directive doesnt know to update itself when you are changing the amOps variable. You should use the 'amCharts.renderChart' or 'amCharts.updateData' event to trigger the chart to update itself with data. Your other option is to pass a promise to the options attribute on the directive that resolves with the options and data for the chart.

[huannews]

Thank you very much. amCharts.renderChart and amCharts.updateData work well. Below is what I did

$scope.showChart = true;
$scope.updateChart = function() {
    console.log($scope.showChart);
    $scope.showChart = !$scope.showChart;
};
$scope.$watch('showChart', function() {
        $scope.amOps = $scope.selectedGroups[0]['charts'];
        console.log($scope.amOps);
        $scope.$broadcast('amCharts.renderChart', $scope.amOps, 'myFirstChart2');
    }, true);