Labels on google charts are not visible in specific coonfiguration
Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
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?
javascript charts google-visualization label
asked Nov 16 '18 at 10:28
CSourceCSource
175
add a comment |
1
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?
javascript charts google-visualization label
asked Nov 16 '18 at 10:28
CSourceCSource
175
add a comment |
1
1
1
1
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?
javascript charts google-visualization label
asked Nov 16 '18 at 10:28
CSourceCSource
175
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?
javascript charts google-visualization label
javascript charts google-visualization label
asked Nov 16 '18 at 10:28
CSourceCSource
175
asked Nov 16 '18 at 10:28
CSourceCSource
175
edited Nov 19 '18 at 10:27
CSource
asked Nov 16 '18 at 10:28
CSourceCSource
175
asked Nov 16 '18 at 10:28
CSourceCSource
175
asked Nov 16 '18 at 10:28
CSourceCSource
175
175
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
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>answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335948%2flabels-on-google-charts-are-not-visible-in-specific-coonfiguration%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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>answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
|
show 4 more comments
1
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>answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
|
show 4 more comments
1
1
1
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>answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
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>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>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>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>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>answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
edited Nov 16 '18 at 17:15
answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
answered Nov 16 '18 at 13:23
WhiteHatWhiteHat
38.7k61985
38.7k61985
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
|
show 4 more comments
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
You are awesome. It works. I accept your solution ofc but it has one disadvantage. When the tooltip is poping up then then the labels are on the top of them
– CSource
Nov 16 '18 at 14:21
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
it is possible way to change it?
– CSource
Nov 16 '18 at 14:33
1
1
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
changed answer above...
– WhiteHat
Nov 16 '18 at 14:50
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
Thank you so much!! I have last question.. I do not know whats going on with grouping by dates/string. When I change values on yAxis to Date type, then grouping is ok, but 0 on yAxis displays.. when i change it to string, then groupins is destroying.. jsfiddle ->jsfiddle.net/wy7g4kdm It seems like only numbers were supported
– CSource
Nov 16 '18 at 16:06
1
1
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
see EDIT above...
– WhiteHat
Nov 16 '18 at 17:16
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335948%2flabels-on-google-charts-are-not-visible-in-specific-coonfiguration%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
TN UIZGQEuYNcEX2loFgIcwhg edsg51,kEtVnNaF7uAeJUt1k7RSf8Q4TbxVIq6QyFttpf,ygypl,z 9tP
