Google Chart API Implementation - charts

Question

Am using google API to implement chart in my Project. Am using Scatter chart.
I need to implement chart like below. How can Achieve this.? Is there any other way to Achieve this by using any other Open source chart.?
Sample Google Chart which I need
Additional requirement

Answer 1

you can use a ComboChart to combine scatter and area series
the area series should be stacked
set the color of the first layer to 'transparent'
use null for values where the series do not coincide
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'area bottom');
data.addColumn('number', 'area top');
data.addColumn('number', 'scatter');
data.addRows([
[1.5, null, null, 1.5],
[3, 3, 3, null],
[6, 3, 3, null]
]);
var options = {
areaOpacity: 1,
colors: ['transparent', '#ff9900', '#3366cc'],
hAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
height: 320,
legend: {
position: 'none'
},
isStacked: true,
seriesType: 'area',
series: {
2: {
type: 'scatter'
}
},
title: 'Final Score',
vAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
width: 320
};
var chart = new google.visualization.ComboChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
UPDATE
just add another area layer for the new requirement...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'area bottom');
data.addColumn('number', 'area middle');
data.addColumn('number', 'area top');
data.addColumn('number', 'scatter');
data.addRows([
[1.5, null, null, null, 1.5],
[3, 3, 3, null, null],
[4.5, 3, 3, null, null],
[4.5, 3, 1.5, 1.5, null],
[6, 3, 1.5, 1.5, null]
]);
var options = {
areaOpacity: 1,
colors: ['transparent', '#ff9900', '#f8bbd0', '#3366cc'],
hAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
height: 320,
legend: {
position: 'none'
},
isStacked: true,
seriesType: 'area',
series: {
3: {
type: 'scatter'
}
},
title: 'Final Score',
vAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
width: 320
};
var chart = new google.visualization.ComboChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>