We Keep Coding

is it possible to duplicate the y axis labels to the right side of a google chart?

is there anyone having some experience with Google Charts, who was facing a similar problem before? I basically need to display the same y axis labels on the both sides of the graph, as shown on the image:
image of the graph
Here is my dataset:
['Date', 'Drilling', 'Stacked', 'Cold stacked', 'Construction', 'Repair']
['2020-09-16', 406, 171, 135, 67, 3]
['2020-09-17', 407, 170, 135, 67, 3]
['2020-09-18', 408, 169, 135, 67, 3]
['2020-09-19', 408, 169, 135, 67, 3]
['2020-09-20', 409, 168, 135, 67, 3]
['2020-09-21', 408, 169, 135, 67, 3]
['2020-09-22', 406, 171, 135, 67, 3]
['2020-09-23', 407, 170, 135, 67, 3]
...and so on...
And graph settings:
{
isStacked: true,
colors: ['#ff4852', '#005BFF', '#FFAB2E', '#af5ddf', '#00A580'],
vAxis: {
format: '######',
},
chartArea: {
top: '30',
height: '75%',
width: '80%',
},
series: {
0: {
textPosition: 'none',
},
},
vAxes: {
1: {
textPosition: 'none',
},
},
hAxes: {
0: {
gridlines: { color: 'transparent' },
},
},
}

Need to test it out but let's try as below. Otherwise you have to duplicate the series data and set it to 'targetAxisIndex: 1'.
series: {
0: {
targetAxisIndex: 0,
targetAxisIndex: 1,
},
},

How to group multiple series in Highcharts

I am using highcharts and looking for sultion something like
this graph
I have treid below code
var options = {
chart: {
type: 'line'
},
yAxis: [{}],
xAxis: [{
categories: ['20 Apr', '21 Apr', '22 Apr', '23 Apr', '24 Apr', '25 Apr',
'26 Apr'],
crosshair: true
}],
series: [{
name: 'sms sent',
yAxis: 0,
data: [200, 150, 170, 180, 190, 120, 254 ]
}, {
name: 'sms delivered',
yAxis: 0,
data: [210, 240, 270, 280, 240, 210, 190]
}, {
name: 'click through',
yAxis: 0,
data: [190, 210, 230, 240, 220, 254, 223]
}, {
name: 'leads',
yAxis: 0,
data: [240, 274, 250, 220, 254, 263, 270]
}, {
name: 'orders',
yAxis: 0,
data: [ 123, 174, 120, 110, 100, 154,145]
}, {
name: 'revenue generated',
yAxis: 0,
data: [200, 100, 400, 300,363, 254,245]
}]
}
var chart = Highcharts.chart('graph',options);
but it is showing only one series.
But I need as shown in image above.
So how can I do that?

Google Charts Vertical Combo vhaxis

I have a Google Charts combo chart, I have configured the position of the chart vertically.
I could not add labels to the top and bottom values, nor could I display the values for the top.
How can I display the top and bottom values and also add a label, the label for the top values is 'percentage' and for the bottom values is 'USD'.
This is my actual code:
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {},
hAxis: {},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
I have this jsfiddle which is where I am testing what I need.
https://jsfiddle.net/cruano2/3gpsa9Lo/2/

are you trying to add axis titles?
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts API - Only one chart rendered on page with two charts

I'm trying to include 2 charts in a page. One is a line chart, the other is a scatter. I've followed the guide on the Google Charts' API for implementing multiple charts on a single page, using a single call-back function however at any given time only one of the charts will appear. The really strange part is that it's the left line chart that appears on Safari and the right Scatter chart that appears on Chrome.
The code for the chart creation in the head section is as follows.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataLine = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['15:00', 728, 1065, 112, 73 , 12, 134],
['16:00', 943, 1056, 122, 112 , 9, 116],
['17:00', 1280, 1069, 156, 99 , 26, 196],
['18:00', 1276, 1277, 154, 134 , 9, 204],
['19:00', 1235, 984, 84, 109 , 10, 134],
['20:00', 1133, 1028, 83, 74 , 20, 73],
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],
['14:00', 779, 524, 32, 30 , 21, 70]
]);
var optionsLine = {
title: '',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
vAxis: {
viewWindow: {
min: 0
}
},
};
var dataScatter = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
]);
var optionsScatter = {
title: '',
vAxis: { minValue: -1.0, maxValue: 1.0},
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
legend: {position: 'bottom'}
};
var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));
chartLine.draw(dataLine, optionsLine);
var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));
chartScatter.draw(dataScatter, optionsScatter);
}
</script>

It would appear the chart.draw function can only be called one at a time but since it's asynchronous it returns instantly and tried to call the second one straight away. The answer is to use the google.visualization.events.addOneTimeListener() to call the second chart.draw after the first.
Finished Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages:["corechart","scatter"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataLine = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],
['14:00', 779, 524, 32, 30 , 21, 70],
['15:00', 587, 533, 30, 161 , 19, 46],
['16:00', 580, 566, 59, 78 , 13, 56],
['17:00', 1041, 658, 23, 67 , 13, 39],
['18:00', 1835, 807, 22, 72 , 7, 65],
['19:00', 1603, 630, 35, 116 , 9, 126],
['20:00', 1898, 614, 26, 135 , 11, 110]
]);
var optionsLine = {
title: '',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
vAxis: {
viewWindow: {
min: 0
}
},
};
var dataScatter = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881],
['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875],
['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375],
['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205],
['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275],
['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3],
['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375]
]);
var optionsScatter = {
title: '',
vAxis: { minValue: -1.0, maxValue: 1.0},
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
legend: {position: 'bottom'}
};
var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));
google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){
//render chart2 once chart1 is rendered
var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));
chartLine.draw(dataLine, optionsLine);
});
chartScatter.draw(dataScatter, optionsScatter);
}
</script>

HighCharts - barchart not rendering correctly in IE8

I have a simple barchart which does not render correctly under IE8 (columns are not visible). It does display correctly with firefox and IE 9+.
I'am using jQuery 1.8.3 and highcharts 3.0.3.
I keep datas in the code sample because the number of columns to draw is important in reproducing the problem. The graph renders correctly in IE8 if I remove one serie.
Here is the code :
$(function () {
$(document).ready(function() {
var barOptions = {
chart: {
renderTo: 'container',
width:450,
height:350,
type: 'column'
},
xAxis: {
categories: [0,1,2,3,4,5,6,7,8,9,10]
},
series: [{
name: 'NC',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'OK',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'KO',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'VALID',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'CHECK',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'COR',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}]
};
barChart = new Highcharts.Chart(barOptions);
});
});
Any ideas on how to fix this ?

As others have said, this looks like a bug in Highcharts. A workaround would be to hide and show one of the series programmatically right after the chart is rendered.
JSFiddle here. Try it in IE8 here.
$(function () {
var barOptions = {
chart: {
renderTo: 'container',
width: 450,
height: 350,
type: 'column'
},
xAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
series: [{
name: 'NC',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'OK',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'KO',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'VALID',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'CHECK',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'COR',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}]
};
barChart = new Highcharts.Chart(barOptions);
barChart.series[0].hide();
barChart.series[0].show();
});

It looks like bug, reported to our developers: https://github.com/highslide-software/highcharts.com/issues/2091