Google visualization dual Y axis chart align line with specific bar The Next CEO of Stack OverflowHiding the legend in Google ChartCan Google Charts support dual y-axis (v-axis)?Google visualization line chart missing Y axisTurning off eslint rule for a specific lineVisualization Combo Chart dual axis chartChanging axis on google visualization line chart is inconsistentGoogle Visualization - Bar Chart Backwards AxisY-Axis format on Google Charts dual Y-Axis LineAxis on Google Charts - BarChart.js - How to offset bars from ZeroLine
How dangerous is XSS
Shortening a title without changing its meaning
Traveling with my 5 year old daughter (as the father) without the mother from Germany to Mexico
Can I cast Thunderwave and be at the center of its bottom face, but not be affected by it?
Is it a bad idea to plug the other end of ESD strap to wall ground?
Planeswalker Ability and Death Timing
Find a path from s to t using as few red nodes as possible
Is this a new Fibonacci Identity?
How should I connect my cat5 cable to connectors having an orange-green line?
How does a dynamic QR code work?
Finitely generated matrix groups whose eigenvalues are all algebraic
Could a dragon use its wings to swim?
What day is it again?
Is it possible to create a QR code using text?
Simplify trigonometric expression using trigonometric identities
Does int main() need a declaration on C++?
Could you use a laser beam as a modulated carrier wave for radio signal?
Is it possible to make a 9x9 table fit within the default margins?
Small nick on power cord from an electric alarm clock, and copper wiring exposed but intact
Can you teleport closer to a creature you are Frightened of?
Strange use of "whether ... than ..." in official text
Compilation of a 2d array and a 1d array
Airship steam engine room - problems and conflict
Gauss' Posthumous Publications?
Google visualization dual Y axis chart align line with specific bar
The Next CEO of Stack OverflowHiding the legend in Google ChartCan Google Charts support dual y-axis (v-axis)?Google visualization line chart missing Y axisTurning off eslint rule for a specific lineVisualization Combo Chart dual axis chartChanging axis on google visualization line chart is inconsistentGoogle Visualization - Bar Chart Backwards AxisY-Axis format on Google Charts dual Y-Axis LineAxis on Google Charts - BarChart.js - How to offset bars from ZeroLine
I have attached snippet for a dual Y axis chart.
The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0
Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).
Thank you as always to the experts out there!
google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>javascript google-visualization
asked Mar 6 at 15:24
cmillcmill
1067
add a comment |
I have attached snippet for a dual Y axis chart.
The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0
Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).
Thank you as always to the experts out there!
google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>javascript google-visualization
asked Mar 6 at 15:24
cmillcmill
1067
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46
add a comment |
I have attached snippet for a dual Y axis chart.
The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0
Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).
Thank you as always to the experts out there!
google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>javascript google-visualization
asked Mar 6 at 15:24
cmillcmill
1067
I have attached snippet for a dual Y axis chart.
The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0
Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).
Thank you as always to the experts out there!
google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);
function drawStuff()
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
drawClassicChart();
;<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>javascript google-visualization
javascript google-visualization
asked Mar 6 at 15:24
cmillcmill
1067
asked Mar 6 at 15:24
cmillcmill
1067
asked Mar 6 at 15:24
cmillcmill
1067
asked Mar 6 at 15:24
cmillcmill
1067
asked Mar 6 at 15:24
cmillcmill
1067
1067
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46
add a comment |
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46
add a comment |
1 Answer
1
active
oldest
votes
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
add a comment |
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
);
);
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%2f55026570%2fgoogle-visualization-dual-y-axis-chart-align-line-with-specific-bar%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
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
add a comment |
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
add a comment |
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>google.charts.load('current',
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'
;
function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
drawClassicChart();
);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
answered Mar 7 at 19:45
WhiteHatWhiteHat
38.5k61884
38.5k61884
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
add a comment |
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
Hope this helps, you could use all custom tooltips
– WhiteHat
Mar 16 at 17:43
add a comment |
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.
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%2f55026570%2fgoogle-visualization-dual-y-axis-chart-align-line-with-specific-bar%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
Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?
– cmill
Mar 7 at 19:37
no problem, see the answer, I had tried but didn't post it due to the outcome...
– WhiteHat
Mar 7 at 19:46