How can I set a max and a min value on a Google Chart?
I've tried this without success:
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:500
}
}
This is all the code I'm using:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:500
}
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
(example from https://developers.google.com/chart/interactive/docs/gallery/barchart)
Thks in advance.
How to display both Percentage and Values in Google Pie Chart ? You can't display both on the slice labels, but if you set the pieSliceText option to 'label' and the legend. position option to 'labeled' , you will see the value on the slice and the percent on the legend label.
Google Charts is an interactive web service that creates graphical charts from user-supplied information. Chart. js is an open-source JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element.
With the release of Material Charts, Google is modifying how the options are specified. The structure for these options is not yet finalized, so Google provides a converter function for the classic options structure into the new one, and it is recommended that you use it instead of using options that may change in the future.
So you could fix your problem in one of two ways:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:500
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 800,
height: 600
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>
google.load("visualization", "1.0", {
packages: ["bar"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
axes: {
y: {
all: {
range: {
max: 3000,
min: 500
}
}
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 800,
height: 600
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>
Source: I work on Google Charts.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With