Prerequisites

• Creating a simple chart using FusionCharts Suite XT?

• Installing the Angular-FusionCharts plugin

• Creating charts using the Angular-FusionCharts plugin

Once a chart is created using the Angular-FusionCharts plugin, the scope object can be used to update the chart dynamically.

This articles describes how you can use the scope object to:

• Update the chart data dynamically

• Update the chart attributes dynamically

• Trigger scope events

Updating the Chart Data Dynamically

A column 2D chart configured to update chart data dynamically is shown below:

The HTML code for this chart is given below:

<!-- The `fusioncharts` directive is used as an attribute of the `<div> element. -->
<div fusioncharts width="400" height="300" type="column2d" , datasource="{{dataSource}}"></div>
<!-- Create a button, which when clicked will call the `updateMyChartData()` function. -->
<p><a class="btn btn-default" ng-click="updateMyChartData()">Click me to change data</a></p>

The AngularJS code for the chart is given below:

$scope.dataSource = {
    chart: {
        caption: "Top 5 stores in last month by revenue",
        subCaption: "Harry's SuperMart",
        numberPrefix: "$",
        theme: "fint"
    },
    data: [{
        label: "Bakersfield Central",
        value: "880000"
    }, {
        label: "Garden Groove harbour",
        value: "730000"
    }, {
        label: "Los Angeles Topanga",
        value: "590000"
    }, {
        label: "Compton-Rancho Dom",
        value: "520000"
    }, {
        label: "Daly City Serramonte",
        value: "330000"
    }]
};
//The `updateMyChartData()` function is defined in the JavaScript code. This function is
//configured to update the label and value for the third and fourth data plots.
// The scope object is used to refer to the `label` and `value` attributes of the `data` object array.
$scope.updateMyChartData = function() {
    $scope.dataSource.data[2].label = "This Label is Updated";
    $scope.dataSource.data[2].value = "420000";
    $scope.dataSource.data[3].label = "This is updated as well";
    $scope.dataSource.data[3].value = "210000";
}

Updating the Chart Attributes Dynamically

As an example, look at how you can change the alignment of the chart caption, dynamically. A column 2D chart configured to let you do this is shown below:

Three radio buttons are shown below the chart. Click the appropriate one to set the required alignment. The HTML code for this chart is given below:

<div fusioncharts width="400" height=" 300" type="column2d",dataSource=" {{dataSource}}"></div>
<p>
    Change caption alignment:
    <!--Add radio buttons to update the caption alignment. -->
    <input type="radio" id="left" name="captionalignment" ng-click="leftAlignCaption()"> Left </input>
    <input type=" radio" id="center" name="captionalignment" checked="1" ng-click="centerAlignCaption()">Center</input>
    <input type="radio" id="right" name="captionalignment" ng-click="rightAlignCaption()"> Right </input>
</p>

The AngularJS code for this is given below:

$scope.datasource = {
    chart: {
        caption: "Quarterly Revenue for FY2013-2014",
        subCaption: "Harry’s SuperMart",
        numberPrefix: "$",
        theme "fint”
    },
    data: [{
        label: "Q1",
        value: "420000"
    }, {
        label: "Q2",
        value: "810000"
    }, {
        label: "Q3",
        value: "720000"
    }, {
        label: "Q4",
        value: "550000"
    }]
};
$scope.leftAlignCaption = function() {
    $scope.dataSource.chart.captionAlignment = "left";
};
$scope.centerAlignCaption = function() {
    $scope.dataSource.chart.captionAlignment = "center";
};
$scope.rightAlignCaption = function() {
    $scope.dataSource.chart.captionAlignment = "right";
};

For a list of other chart attributes that you can update for a column 2D chart, click here.

Trigger Scope Events from the Chart

The quarterly revenue column 2D chart configured to listen to the dataplotClick event is shown below:

When a data plot is clicked, the text Selected Value: rendered below the chart is updated to show the value of that data plot.

The HTML code for this chart is given below:

<div fusioncharts width="600" height="400" type="column2d" , datasource="{{dataSource}}" events="events"></div>
<!-- The `selectedValue` variable is defined to store the label and the value of the data plot that is clicked. -->
<p>Selected Value:: {{ selectedValue }}</p>

The AngularJS code for this chart is given below:

$scope.dataSource = {
    chart: {
        caption: "Quarterly Revenue for FY2013-2014",
        subCaption: "Harry's SuperMart",
        xAxisName: "Quarter",
        yAxisName: "Revenue",
        numberPrefix: "$",
        showValues: "0",
        theme: "fint"
    },
    data: [{
        label: "Q1",
        value: "420000"
    }, {
        label: "Q2",
        value: "810000"
    }, {
        label: "Q3",
        value: "720000"
    }, {
        label: "Q4",
        value: "550000"
    }]
};
// The `selectedValue` variable is assigned an initial value that will be displayed when the chart is
// first rendered.
$scope.selectedValue = "nothing";
// When the `dataplotclick` event is triggered, the `$apply` scope object is used to execute the
// function that checks for the value of the data plot clicked.
//This value is assigned to the `selectedValue` variable.
// Consequently, the text rendered below the chart is updated.
$scope.events = {
    dataplotclick: function(ev, props) {
        $scope.$apply(function() {
            $scope.selectedValue = props.displayValue;
        });
    }
}