How can I draw an additional horizontal grid line with a specific value in Google Bar chart. The line I want to draw is not the average. It is a specific value.
How can I do this?
EDIT
This my data model:
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
And in options
object I have this:
seriesType: 'bars',
series:{
3: {
type: 'line'
}
}
Since 25 is the value I want to be rendered as a line and it is in the 4th position.
And finally
var chart = new google.visualization.ComboChart(document.getElementById("container_id"));
Am I missing something?
EDIT-2 Complete script:
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);
function drawChart_ebcg_unitary() {
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
chartArea: {
left: 50,
width: "90%",
height: 250
},
title: "",
width: '100%',
height: 350,
bar: {groupWidth: "90%"},
legend: {position: "none"},
seriesType: 'bars',
series:{
1: {
type: 'line'
}
},
vAxis: {
minValue: 0,
title: 'SALES UNITS'
},
hAxis: {
title: 'MONTH'
},
annotations: {
textStyle: {
fontName: 'Arial, sans-serif',
color: '#000000',
fontSize: 12,
bold: true
},
alwaysOutside: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
chart.draw(view, options);
}
jQuery(window).resize(function () {
drawChart_ebcg_unitary();
});
EDIT 3: Average line
How can I make the average line (please see screenshot) value (25) to appear only once, i.e at the end of the line rather than showing it on every month's column. This needs to look similar as in the screenshot under (What I need) section. Please advise.
use a ComboChart
, which allows you to draw series of different types.
in the options, set the main seriesType
.
then use the series
option, to change the type of a specific series...
{
seriesType: 'bars',
series: {
1: {
type: 'line'
}
}
}
see following working snippet...
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);
function drawChart_ebcg_unitary() {
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, 3]);
var options = {
chartArea: {
left: 50,
width: "90%",
height: 250
},
title: "",
width: '100%',
height: 350,
bar: {groupWidth: "90%"},
legend: {position: "none"},
seriesType: 'bars',
series:{
1: {
type: 'line'
}
},
vAxis: {
minValue: 0,
title: 'SALES UNITS'
},
hAxis: {
title: 'MONTH'
},
annotations: {
textStyle: {
fontName: 'Arial, sans-serif',
color: '#000000',
fontSize: 12,
bold: true
},
alwaysOutside: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ecbg_unitary"></div>
EDIT
to display the annotation for the average only once,
use your own calculation for the annotation,
and only return a value if the row index equals the last row...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
},
2, 3, {
calc: function(dt, row) {
var annotation = null;
if (row === (dt.getNumberOfRows() - 1)) {
annotation = dt.getFormattedValue(row, 3);
}
return annotation;
},
type: 'string',
role: 'annotation'
}
]);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다