I want to accomplish google stacked area chart.
Here is the js fiddle: Js Fiddle
I also tried adding the options for stacked area:
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
It is available in the documentation for google charts:stacked area
I want to display it as shown in this figure:
Please ignore everything else in this figure except the stacked area chart displayed in between the line chart and the map
seems to work here, is there more you can share?
see following examples...
isStacked: true
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: true,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
isStacked: false
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: false,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>