Home forums Using CanvasJS Update Multiple Chart.js Data to Percentage values from Absolute Values

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26312

    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);
    };

    }]);

    #26320

    @padroni,

    You can render multiple CanvasJS Charts within a page in Angular. 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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.