Google Chart Animation not working with Stacked chart - charts

I am trying to apply animation on google chart on first load, its working with normal bar chart but when I am making it stacked, Animation not working. Please help me out
Tried almost every option from documentation but nothing is helping out.
there is no error in console.
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
chart: {
title: 'Leave Info',
subtitle: 'Total EL and CL consumed in a year',
},
bars: 'vertical',
height: 300,
width: 500,
animation:{
startup: 'true',
duration: 1000,
easing: 'out'
},
bar: {groupWidth: "40%"},
isStacked: true,
series: {
0: { color: 'red' },
1: { color: '#999' }
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

With the great help by White-hat from comments above, I am able to get this result, Thought of posting it here if anyone else need the help
google.charts.load('current', {
callback: function() {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
isStacked: true,
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Google Stepped Area Chart with custom annotation

Thanks to White Hat in this post ,I was able to make a custom annotation for the area chart. Somehow it doesn't work the stepped area chart.
The chart draws at first everything correctly but then sets the annotation in the stepped area chart back. With help of the MutationObserver, the settings should be overridden when the chart is drawn but this applies just for the area chart.
How can I solve this ?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
the default annotation settings for stepped area charts differ from normal area charts
for stepped, the annotations appear inside the area, which changes the color to white,
which is not a color used to find the labels and move them
an easy fix is to specify that the annotation always be outside the area...
annotations: {
alwaysOutside: true,
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts: vAxis on the right for vertical oriented charts

I have difficulties in getting the vertical axis on the right side, I read this post but it was 5 years ago and didn't work out for the vertical graph orientation. I was also not able to display vertical axis on the left and right side of the chart.
I hope there is a better way than making a dummy column ....
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'y1');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'y2');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'playground',
colors: ['#FA7F01', '#AEAAA2'],
interpolateNulls: true,
hAxis: {
title: 'x',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
title: 'y',
direction: 1
},
orientation: 'vertical',
annotations: {
alwaysOutside: true,
stem: {
color: '#ff00ff',
length: 10
},
},
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "steppedArea"},
},
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
chart.draw(view.toDataTable(), options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div id="visualization"></div>
</body>
</html>
normally, you could use targetAxisIndex to move the axis to the right side,
but this doesn't appear to work with --> orientation: 'vertical'
although not ideal, you could manually move the axis on the chart's 'ready' event...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'y1');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'y2');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'playground',
colors: ['#FA7F01', '#AEAAA2'],
interpolateNulls: true,
hAxis: {
title: 'x',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
title: 'y',
direction: 1
},
orientation: 'vertical',
annotations: {
alwaysOutside: true,
stem: {
color: '#ff00ff',
length: 10
},
},
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "steppedArea"},
},
legend: {
alignment: 'end',
position: 'top'
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', moveAxis);
function moveAxis() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labelGap;
var labelIndex = -1;
var labelWidth;
var xCoord;
var yTitle;
// move axis labels
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
labelWidth = 0;
if (label.getAttribute('text-anchor') === 'end') {
labelIndex++;
labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width;
labelGap = chartBounds.left - parseFloat(label.getAttribute('x'));
xCoord = chartBounds.left + chartBounds.width + labelWidth + labelGap;
label.setAttribute('x', xCoord);
} else if ((label.getAttribute('text-anchor') === 'middle') && (label.hasAttribute('transform'))) {
yTitle = label;
}
});
yTitle.setAttribute('y', xCoord + 92);
// swap axis baselines
var lines = container.getElementsByTagName('rect');
Array.prototype.forEach.call(lines, function(line) {
if ((parseFloat(line.getAttribute('x')) === (chartBounds.left + chartBounds.width - 1)) && (parseFloat(line.getAttribute('width')) === 1)) {
line.setAttribute('x', chartBounds.left);
} else if ((parseInt(line.getAttribute('x')) === chartBounds.left) && (parseInt(line.getAttribute('width')) === 1) && (line.getAttribute('fill') === '#333333')) {
line.setAttribute('x', chartBounds.left + chartBounds.width - 1);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Try adding this to your options:
series: {
0: { targetAxisIndex: 1, },
1: { targetAxisIndex: 1, },
}
What this means is that both your series should use the right-side axis.

Google Charts: Animation doesn't work for one chart, pointing annotations in the title area

I'm a bit new with google charts, I was playing around to learn it but I got two problems with my chart:
1) I'm not sure why the second chart (red) displays without animation
2) How can I extend the annotation lines with the values to the top of my graph?
The best case would be that the values are shown under the chart title
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'Playground',
colors: ['#007F01', '#FE0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
Here you can run it:
jsfiddle
there is bug within google charts when working with data views and animation.
an easy fix is to convert the view back to a data table when drawing the chart...
view.toDataTable()
e.g.
chart.draw(view.toDataTable(), options);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'Playground',
colors: ['#007F01', '#FE0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
UPDATE
as for extending the annotation lines,
you can change the length,
but this will just increase the size of each,
and they still will not be aligned at the top
annotations: {
stem: {
length: 10
}
},
the only way would be to modify the chart manually, after it draws
you can move the labels and increase the height of the lines
but this will create two issues
1) the chart will move them back, anytime there is interactivity, such as hovering the labels or data points
to fix, you can use a MutationObserver
this will override the settings, every time the chart tries to move them back
2) if you use chart method getImageURI to get an image of the chart, the changes will not appear
to fix this, use html2canvas to get the image instead of the chart method
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) the move function (moveAnnotations) uses colors from the options in order to identify the annotation labels from the rest of the chart labels
the chart changes all colors to lowercase, so had to change colors in options to lowercase
2) move function also uses option annotations.stem.length to identify the annotation lines

Remove decimal values from the axis

I'm using google charts and I have an issue with formatting of the hAxis.
It looks like this when there are only 4 values on it:
I want to remove those decimal numbers between the real values. I don't want it to show 0.5,1.5,2.5,3.5
How can it be done?
there are a few options that could be used, if you were using a classic chart
but those are not supported using material charts
you can use option hAxis.format to change the number format,
but this will only remove the decimal and cause the numbers to repeat
the only method i've found when using a matieral chart,
is to use string values for the x-axis...
['Lesson', 'Average', 'Average best'],
['1', 10, 10],
['2', 10, 10],
['3', 10, 10],
['4', 7, 7.5]
or you can use a DataView to convert the numbers to strings...
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
var options = {
chart: {
title: 'Results distribution by lesson',
},
height: 280
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(view, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Chart API Implementation

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
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>