Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using chart-dataset-override option in angular-chart.js

Tags:

chart.js

I'am writing an application for budget management and i am using angular-chart.js.

i want to use a dataset to override the initial data(mainly to add new data to the graph and give diffrent color for each bar,label etc.)and set label and colors according to the value of the data. currently,i tried to do that hard coded but only the first value is being override.

here is the code i am using :

angular.module("app2", ["chart.js"]).controller("MixedChartCtrl",
function($scope) {
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

    $scope.labels = ['', ''];
    $scope.data = [65, 11];
    $scope.datasetOverride = [

        {
            label: 'Override Series A',
            borderWidth: 1,
            type: 'bar',
            data: [345]
        },
        {
            label: "Bar chart1",
            borderWidth: 1,
            type: 'bar',
            data: [45]
        }

    ];
});
like image 532
Uriel Parienti Avatar asked Jul 27 '16 11:07

Uriel Parienti


1 Answers

Hoping that yourquestion is, you want a fill color/label/something to each individual data (for each bar).

Above (your) code snippet is used when you have two data sets.
All these dataset properties will accept String when the same property value has to set for all data, and they will also accept Array[String] - when you want to set different property values for different data in the same dataset. (like below).

$scope.data = [65,11];
$scope.datasetOverride = [
{
  label: ['something', 'otherthing'],
  borderWidth: [1,2],
  backgroundColor: ['#FF4242','#2291ff']
}
]

so now I understood that you might be adding dynamically data.
so you have to push data into DATASET something like this:

$scope.data.push(345);

So if you want to set different properties for these you need to push the properties (arrays).

$scope.datasetOverride[0][label].push('someother thing');
$scope.datasetOverride[0][borderWidth].push(2);
$scope.datesetOverride[0][backgroundColor].push('#46bfb8');

This will add a bar with new color/label/etc beside the previous bars.

I hope I understood your question and this will help.

like image 94
Durgaprasad Kusuma Avatar answered Oct 10 '22 06:10

Durgaprasad Kusuma