Update Multiple Chart.js Data to Percentage values from Absolute Values

[padroni]

Hi,

I am creating Multiple charts using angularjs ng-repeat, and want to switch data values between Absolute and Percentage Values. Please help, on how to achieve it.

chart.html

<div id=”content” ng-controller=”ChartController”>
<section id=”directives”>
<div class=”page-header”>
<h2>Blockchain Solution: {{ title}}</h2>
</div>
<br><br>

<div id=”chartSection” class=”container”>
<h1>Compliance Details</h1>
<div class=”radioButton”>
<form ng-submit=”submit()” name=”myForm”>
<label>
<input type=”radio” ng-model=”radioChartType” value=”Absolute” id=”0″ ng-click=”buttonClick($event)”>
Show as Absolute Numbers
</label>
<label>
<input type=”radio” ng-model=”radioChartType” value=”Percentage” id=”1″ ng-click=”buttonClick($event)”>
Show as Percentage
</label><br />
<label>Showing Charts For : {{ radioChartType }}</label><br />
</form>
</div>

<div class=”row justify-content-around” id=”bar-chart”>
<div class=”col-md-12″ ng-repeat=”module in ocw.modules”>
<div class=”panel panel-default”>
<div class=”panel-heading”>Rule: {{ module.ruleName}} <br>
<p>Total Assets: 1400   Compliant Assets: 800   Non-Compliant Assets: 600</p>
</div>
<div class=”panel-body”>
<div class=”col-md-6″>
<canvas id=”bar{{index}}” class=”chart chart-line” chart-data=”module.dataC” chart-labels=”module.labels” chart-series=”module.seriesC” chart-options=”options” chart-colors=”colours” chart-click=”onClick” chart-hover=”onHover” chart-dataset-override=”datasetOverride”>
</canvas>
</div>
<div class=”col-md-6″>
<canvas id=”bar{{$index}}” class=”chart chart-line” chart-data=”module.dataNC” chart-labels=”module.labels” chart-series=”module.seriesNC” chart-options=”options” chart-colors=”colours” chart-dataset-override=”datasetOverride”>
</canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

ChartController.js
app1.controller(“ChartController”, [‘$scope’, function($scope) {

$scope.title = “DMV Ledger”;

$scope.colours = [‘#72C02C’, ‘#3498DB’, ‘#717984’, ‘#F1C40F’];

$scope.DataSetOverride = [{
lineTension: 0
// yAxisID: ‘y-axis-1’
}]; //y-axis-1 is the ID defined in scales under options.

$scope.options = {
legend: {
display: true
},
responsive: true, // set to false to remove responsiveness. Default responsive value is true.
scales: {
yAxes: [{
id: ‘y-axis-1’,
display: true,
scaleLabel: {
display: true,
// labelString: ‘# ‘,
fontStyle: ‘bold’
},
ticks: {
fontStyle: ‘bold’
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: ‘Month’,
type: ‘linear’,
position: ‘left’,
fontColor: ‘#72C02C’,
fontStyle: ‘bold’
},
ticks: {
fontStyle: ‘bold’
}
}]
}
};

$(“#0”).click(function() {

});
$(“#1”).click(function() {

});

$scope.radioChartType = ‘Absolute’;

$scope.submit = function() {
alert(‘submit’);
};

$scope.radioChart = {
type: ‘Absolute’
};

//variables for Json data and ng-repeat example

var json = {
“modules”: [{
“ruleName”: “Valid-Registration”,
“seriesC”: [“Compliant”],
“seriesNC”: [“Non-Compliant”],
“dataC”: [
[“900”, “699”, “780”, “491”, “676”, “275”, “660”, “867”]
],
“dataPC”: [
[“90”, “99”, “80”, “91”, “76”, “75”, “60”, “67”]
],
“dataNC”: [
[“10”, “19”, “81”, “41”, “26”, “35”, “10”, “27”]
],
“labels”: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”],
“colours”: [{ // default
// [‘#72C02C’, ‘#3498DB’, ‘#717984’, ‘#F1C40F’];
//”fillColor”: “rgba(224, 108, 112, 1)”,
“fillColor”: ‘#fff’,
“strokeColor”: ‘#72C02C’,
“pointColor”: ‘#72C02C’,
“pointStrokeColor”: ‘#72C02C’,
//”strokeColor”: “rgba(207,100,103,1)”,
//”pointColor”: “rgba(220,220,220,1)”,
//”pointStrokeColor”: “#fff”,
“pointHighlightFill”: “#fff”,
“pointHighlightStroke”: “rgba(151,187,205,0.8)”
}]
},

{
“ruleName”: “Valid-Insurance”,
“seriesC”: [“Compliant”],
“seriesNC”: [“Non-Compliant”],
“dataC”: [
[“10”, “19”, “20”, “11”, “26”, “35”, “40”, “57”]
],
“dataPC”: [
[“90”, “99”, “80”, “91”, “76”, “75”, “60”, “67”]
],
“dataNC”: [
[“0”, “10”, “12”, “1”, “18”, “20”, “10”, “26”]
],
“labels”: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”],
“colours”: [{ // default
“fillColor”: “rgba(224, 120, 122, 2)”,
“strokeColor”: “rgba(107,140,123,1)”,
“pointColor”: “rgba(220,220,220,1)”,
“pointStrokeColor”: “#fff”,
“pointHighlightFill”: “#fff”,
“pointHighlightStroke”: “rgba(151,187,205,0.8)”
}]
}, {
“ruleName”: “Valid-License”,
“seriesC”: [“Compliant”],
“seriesNC”: [“Non-Compliant”],
“dataC”: [
[“90”, “99”, “80”, “91”, “76”, “75”, “60”, “67”]
],
“dataPC”: [
[“90”, “99”, “80”, “91”, “76”, “75”, “60”, “67”]
],
“dataNC”: [
[“23”, “29”, “12”, “10”, “16”, “15”, “30”, “27”]
],
“labels”: [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”],
“colours”: [{ // default
“fillColor”: “rgba(224, 108, 112, 1)”,
“strokeColor”: “rgba(207,100,103,1)”,
“pointColor”: “rgba(220,220,220,1)”,
“pointStrokeColor”: “#fff”,
“pointHighlightFill”: “#ff0”,
“pointHighlightStroke”: “rgba(151,187,205,0.8)”
}]
}

]
};
$scope.ocw = json;

$scope.onClick = function(points, evt) {
console.log(points, evt);
};

}]);

[Vishwas R]

@padroni,

Please refer to this documentation page for step-to-step tutorial on rendering multiple charts within a page. The same thing works fine in Angular aswell. Please refer Angular Gallery for more examples with working code. You can also download Angular Samples from our download page to try it locally.

—
Vishwas R
Team CanvasJS