We Keep Coding

Labels on google charts are not visible in specific coonfiguration

I have chart configured like in working jsfiddle.
I have configured labels(basing on google doc documentation: https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars)
But they aren't visible. When I change chart type to google.visualization.BarChart, then labels appear but bars structure is destroyed. How to add labels to my configuration?
Replicated:
https://jsfiddle.net/41fmq37j/
JS:
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{ role: 'annotation' }],
[2014, 10, 400 ,'label1'],
[2014, 800, 100 ,'label2'],
[2015, 200, 460 ,'label3'],
[2015, 110, 660 ,'label4'],
[2016, 100, 300 ,'label5'],
[2016, 600, 120 ,'label6'],
[2017, 360, 540 ,'label7'],
[2017, 300, 500 ,'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT:
It is possible to configure yAxis like below? Because current format can be confusing.
I would like to create more, a little different graphs, for example which will group bars by string. So another question is: how we can archive grouping yAxis by string? Maybe we should create any comparator?

material charts do not support columns roles, such as 'annotation',
along with several other options
and, it's not possible to have multiple stacks per label in classic charts
as such, we can use a material chart,
and add our own annotations manually,
on the chart's 'ready' event
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[2014, 10, 400, 'label1'],
[2014, 800, 100, 'label2'],
[2015, 200, 460, 'label3'],
[2015, 110, 660, 'label4'],
[2016, 100, 300, 'label5'],
[2016, 600, 120, 'label6'],
[2017, 360, 540, 'label7'],
[2017, 300, 500, 'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: '0'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.textContent === data.getValue(0, 0).toString()) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#000000');
annotation.setAttribute('x', coordsBar.x + coordsBar.width - 16);
annotation.setAttribute('y', coordsBar.y + coordsBar.height - (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
the annotation script finds the first y-axis label,
and uses it as a clone for the annotations.
if the values for the y-axis change,
then the script to find the label needs to change.
updated here...
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
annotation = label;
}
});
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Date', id: 'string', type:'date'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[new Date('2011-12-20'), 10, 400, 'User1'],
[new Date('2011-12-20'), 800, 100, 'User2'],
[new Date('2011-12-21'), 200, 460, 'User3'],
[new Date('2011-12-21'), 200, 460, 'User3'],
]);
var dateFormat = 'YYYY/MM/dd';
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: dateFormat,
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var formatDate = new google.visualization.DateFormat({
pattern: dateFormat
});
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#ffffff');
annotation.setAttribute('text-anchor', 'start');
annotation.setAttribute('x', coordsBar.x + coordsBar.width);
annotation.setAttribute('y', coordsBar.y + (coordsBar.height / 2) + (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Can't set width of column in bar chart [duplicate]

This question already has an answer here:
Google Charts show all labels
(1 answer)
Closed 4 years ago.
I'm working with Google Bar Charts. In the left side, I need to add the description of the bars.
Move within USA
Received in New Jersy
Handed over to International
Currier At Sri lanka port
But I can't show the whole sentence in the bar chart. Below I attached the bar chart and the code
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", {role: "style"}],
["Move within USA",parseInt(orderObj.RNJ), "color :blue"],
["Received in New Jersy", parseInt(orderObj.HOC), "color :yellow"],
["Handed over to International Currier", parseInt(orderObj.ASP), "color :red"],
["At Sri lanka port", parseInt(orderObj.KWH), "color: green"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
title: "",
width: 600,
height: 300,
bar: {groupWidth: "65%"},
legend: {position: "none"}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_divSea1"));
chart.draw(view, options);

How about adjusting it using left and width of chartArea as follows?
var options = {
title: "",
width: 600,
height: 300,
bar: {groupWidth: "65%"},
legend: {position: "none"},
chartArea: {left: 250, width: 300} // Added
};
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var orderObj = {RNJ: 6, HOC: 26, ASP: 6, KWH: 14}; // sample values
var data = google.visualization.arrayToDataTable([
["Element", "Density", {role: "style"}],
["Move within USA",parseInt(orderObj.RNJ), "color :blue"],
["Received in New Jersy", parseInt(orderObj.HOC), "color :yellow"],
["Handed over to International Currier", parseInt(orderObj.ASP), "color :red"],
["At Sri lanka port", parseInt(orderObj.KWH), "color: green"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2]);
var options = {
title: "",
width: 600,
height: 300,
bar: {groupWidth: "65%"},
legend: {position: "none"},
chartArea: {left: 250, width: 300} // Added
};
var chart = new google.visualization.BarChart(document.getElementById("chart_divSea1"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_divSea1"></div>
Reference :
Configuration Options
If this was not what you want, I'm sorry.

Annotation Google Chart API

i'm trying to use Google Chart API for building an Waterfall chart. I noticed that Candlestick/Waterfall charts are not supporting the annotations.
See this jsfiddle sample
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'MinimumLevel');
data.addColumn('number', 'MinimumLevel1');
data.addColumn('number', 'MaximumLevel');
data.addColumn('number', 'MaximumLevel1');
data.addColumn({type: 'number', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'number', role: 'annotation'});
data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);
var options = {
legend: 'none',
bar: { groupWidth: '60%' } // Remove space between bars.
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I would like to put the value of the 5th column at the top of every candlestick.
It should look like this :
Is there a way to do this?
Thanks

I add annotations to candlestick charts by adding annotations to a hidden scatter plot. You can set exactly where you want the annotations to sit by changing the plot.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number'); //scatter plot for annotations
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
var high, low, open, close = 160;
for (var i = 0; i < 10; i++) {
open = close;
close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
high = Math.max(open, close) + ~~(Math.random() * 10);
low = Math.min(open, close) - ~~(Math.random() * 10);
annotation = '$' + close;
annotation_text = 'Close price: $' + close;
data.addRow([new Date(2014, 0, i + 1), low, open, close, high, high, annotation, annotation_text]);
}
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
explorer: {},
chartArea: {
left: '7%',
width: '70%'
},
series: {
0: {
color: 'black',
type: 'candlesticks',
},
1: {
type: 'scatter',
pointSize: 0,
targetAxisIndex: 0,
},
},
candlestick: {
color: '#a52714',
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
});
}
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

just so happens, i ran into the same problem this week
so I added my own annotations, during the 'animationfinish' event
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});
var waterFallChart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
groupWidth: '85%'
},
chartArea: {
backgroundColor: 'transparent',
height: 210,
left: 60,
top: 24,
width: '100%'
},
hAxis: {
slantedText: false,
textStyle: {
color: '#616161',
fontSize: 9
}
},
height: 272,
legend: 'none',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
gridlines: {
count: -1
},
textStyle: {
color: '#616161'
},
viewWindow: {
max: 24000000,
min: 16000000
}
},
width: '100%'
}
});
google.visualization.events.addOneTimeListener(waterFallChart, 'ready', function () {
google.visualization.events.addListener(waterFallChart.getChart(), 'animationfinish', function () {
var annotation;
var chartLayout;
var container;
var numberFormatShort;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowFormattedValue;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
container = document.getElementById(waterFallChart.getContainerId());
chartLayout = waterFallChart.getChart().getChartLayoutInterface();
numberFormatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
rowIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
switch (rect.getAttribute('fill')) {
// use colors to identify bars
case '#922b21':
case '#1e8449':
case '#007fff':
rowWidth = parseFloat(rect.getAttribute('width'));
if (rowWidth > 2) {
rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(rect.getAttribute('x'));
rowFormattedValue = numberFormatShort.formatValue(rowValue);
if (rowValue < 0) {
rowFormattedValue = rowFormattedValue.replace('-', '');
rowFormattedValue = '(' + rowFormattedValue + ')';
}
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
$(annotation).text(rowFormattedValue);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY);
annotation.setAttribute('font-weight', 'bold');
rowIndex++;
}
break;
}
});
});
});
$(window).resize(function() {
waterFallChart.draw();
});
waterFallChart.draw();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart change bar color

i am using google chart api to show a chart on a bootstrap modal with framework Laravel, i'm having an issue because i'm not beein able to change the colour of the bar and put one blue and the other one green, another issue is that at the right it only put me the name of une of the bars(RX).
Here is my js code:
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(nombre, unidad, tipo, valor, media) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'RX');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Tú', parseInt(valor), valor+' '+unidad],
['Media', parseFloat(media), parseInt(media)+' '+unidad],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,1,2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
// height: 400,
// width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100,
minValue: 0,
}
});
$("#myModalLabel").empty();
$("#myModalLabel").append(tipo+" - "+nombre);
$("#modalChart").modal();
}
Here is the chart that i get:

you can write your drawchart function like this
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
For more https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns

google visualization barchart formatting vertical axis (vAxis) not working

I tried to format vertical axis of bar chart by adding '$' symbol to the vaxis text , but it is not working.
However formating to horizontal axis is working fine !!!!!
try the code below you can see that vertical axis values are suffixed by dollar ($) symbol
here is the code that i am using to draw an area chart
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is not working
tooltip: {trigger: 'none'},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>

Try below code,
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out'},
tooltip: {trigger: 'none'}
};
var formatter = new google.visualization.NumberFormat({ pattern: '$#' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>

No, That was not working However i found the solution.
Here is my solution, here i am drawing a star icon instead of '$' symbol
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
draw_stars();
}
function draw_stars()
{
var iteration = 0;
var val1,val2;
$('#barchart_values').each(function(index){
$("text").each(function(index){
//alert($(this).value);
if($(this).is("[text-anchor]") && $(this).is("[y]") && $(this).is("[x]") && $(this).attr("text-anchor") == 'end')
{
if(iteration == 0)
{
val1 = $(this).attr('x');
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
else
{
val2 = $(this).attr('x');
}
if(val1 == val2)
{
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
iteration = iteration + 1;
}
});
});
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>