user8373379 user8373379 - 3 months ago 12
AngularJS Question

unable to add horizontal scrollbar to my chart

I am working on angularjs google charts. I am using angularjs google column chart to display the data in the form of columns, issue is when i have more data to show the bar width is reducing. I want to show the chart with horizontal scrollbar if the data is more to display as shown in the example here.
I tried to implement the same but unable to display the scrollbar,any suggestions would be helpful.

My sample demo here

js code:

angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
chart1.type = "ColumnChart";
chart1.displayed = false;
chart1.data = {
"cols": [{
id: "month",
label: "Month",
type: "string"
}, {
id: "laptop-id",
label: "Laptop",
type: "number"
}, {
id: "desktop-id",
label: "Desktop",
type: "number"
}, {
id: "server-id",
label: "Server",
type: "number"
}, {
id: "cost-id",
label: "Shipping",
type: "number"
}],
"rows": [{
c: [{
v: "January"
}, {
v: 19,
f: "42 items"
}, {
v: 12,
f: "Ony 12 items"
}, {
v: 7,
f: "7 servers"
}, {
v: 4
}]
}, {
c: [{
v: "February"
}, {
v: 13
}, {
v: 1,
f: "1 unit (Out of stock this month)"
}, {
v: 12
}, {
v: 2
}]
}, {
c: [{
v: "March"
}, {
v: 24
}, {
v: 5
}, {
v: 11
}, {
v: 6
}

]
}, {
c: [{
v: "April"
}, {
v: 24
}, {
v: 5
}, {
v: 11
}, {
v: 6
}

]
}, {
c: [{
v: "May"
}, {
v: 18
}, {
v:11
}, {
v: 7
}, {
v:2
}

]
}, {
c: [{
v: "June"
}, {
v: 21
}, {
v: 5
}, {
v: 8
}, {
v: 6
}

]
}, {
c: [{
v: "July"
}, {
v: 24
}, {
v: 5
}, {
v: 9
}, {
v: 9
}

]
}, {
c: [{
v: "August"
}, {
v: 14
}, {
v: 1
}, {
v: 11
}, {
v: 5
}

]
}, {
c: [{
v: "September"
}, {
v: 4
}, {
v: 2
}, {
v: 51
}, {
v: 6
}

]
}, {
c: [{
v: "October"
}, {
v: 34
}, {
v: 4
}, {
v: 0
}, {
v: 1
}

]
}]
};
chart1.options = {
"title": "Sales per month",
"colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
"title": "Date"
}
};
chart1.view = {
columns: [0, 1, 2, 3, 4]
};
$scope.myChart = chart1;

$scope.seriesSelected = function(selectedItem) {
console.log(selectedItem);
var col = selectedItem.column;
//If there's no row value, user clicked the legend.
if (selectedItem.row === null) {
//If true, the chart series is currently displayed normally. Hide it.
console.log($scope.myChart.view.columns[col]);
if ($scope.myChart.view.columns[col] == col) {
//Replace the integer value with this object initializer.
$scope.myChart.view.columns[col] = {
//Take the label value and type from the existing column.
label: $scope.myChart.data.cols[col].label,
type: $scope.myChart.data.cols[col].type,
//makes the new column a calculated column based on a function that returns null,
//effectively hiding the series.
calc: function() {
return null;
}
};
//Change the series color to grey to indicate that it is hidden.
//Uses color[col-1] instead of colors[col] because the domain column (in my case the date values)
//does not need a color value.
$scope.myChart.options.colors[col - 1] = '#CCCCCC';
}
//series is currently hidden, bring it back.
else {
console.log("Ran this.");
//Simply reassigning the integer column index value removes the calculated column.
$scope.myChart.view.columns[col] = col;
console.log($scope.myChart.view.columns[col]);
//I had the original colors already backed up in another array. If you want to do this in a more
//dynamic way (say if the user could change colors for example), then you'd need to have them backed
//up when you switch to grey.
$scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
}
}
};
});


I tried by adding the below code in my js code above in
chart1.options
but it didn't worked:

width: chart1.data.getNumberOfRows() * 130,
bar: {groupWidth: 90},

Answer Source

In your html you can set the width and set what to do on overflow like this

<div ng-controller="myController">
    <div google-chart chart="myChart" style="width:400px;height:500px;overflow-x:scroll"></div>
    <br><br>
     <div google-chart chart="myChart"></div>
  </div>

or you can as well do

<div ng-controller="myController">
<div google-chart chart="myChart" style="height:500px;overflow-x:auto"></div>
<br><br>
 <div google-chart chart="myChart"></div>

In the fiddle you have attached,they have used css styling,Please reffer that.

update

and you have to set chart properties as

          "width": chart1.data.rows.length *65,
          "bar": {groupWidth: 20},

based on your requirement.The above configuration has to be manipulated according to your need.You can see an example here ie. the link you are reffering. Please find the plunk for the same https://plnkr.co/edit/o8iccmrB13NdDAKCxb7Z?p=preview (if you cant view it,please see in the version section)

Update If you are using data from async call then ,set options inside

MyDataService.getChartDataFromService().then(
            function (response) {
//other codes
.......//set options here

}))