Hi,
I am struggling with Stacked Column Chart. I am trying to add annotations
value for each part of column, but I am not successful.
If value is 0 or bigger, then Annotation value should be visible inside the
part of column. If value is 0, then annotation should be not visible.
I was able to do something like this:
[image: picture 1 - wrong.png]
But I need something similar like this:
[image: picture 2 - correct.png]
How can I render Annotations inside these bars?
Source Code:
function drawChart(selectedM, callDataTable) {
var data = new google.visualization.DataTable();
data.addColumn("string", "month");
data.addColumn("number", "Events");
data.addColumn("number", "Emails");
data.addColumn("number", "Calls");
if (callDataTable) {
for (
var i = callDataTable.length - selectedM.value - 1;
i < callDataTable.length;
i++
) {
// $scope.stepVar.push(
// "inside for -> Graph " + callDataTable[i].value
// );
data.addRows([[callDataTable[i].labelM, 4, 3, callDataTable[i].
value,]]);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1,
2,
3,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
{
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}
]);
var options = {
bar: {
groupWidth: "85%"
},
isStacked: true,
legend: { position: "none" },
colors: ["#fa9616","blue", "green"],
hAxis: {
direction: 1,
textPosition: "out",
slantedText: true,
slantedTextAngle: 30,
baselineColor: "none",
ticks: []
},
vAxis: {
baselineColor: "none",
gridlines: { count: 4}
},
chartArea: {
width: "90%",
height: "70%"
},
annotations: {
alwaysOutside: false,
textStyle: {
fontName: "Times-Roman",
fontSize: 15,
bold: true,
italic: false,
color: "#871b47",
opacity: 0.9
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById("columnchart_values")
);
chart.draw(view, options);
}
Could you please help me to solve it?
Martin
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/ce00182d-25e5-495f-94df-ea93cdc78ab5%40googlegroups.com.
