How to add a custom axis line to a google chart? - javascript

I have a google scatter chart that has some significant thresholds in it. How do I visualise them?
Do I push some extra ticks on chart axis? If so how do I add just one and how do I style it?
I am aiming for something like this.
I am using React Google charts


add another column, or series, with the same value for all rows...
this can be added using a data view with calculated columns,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: function () {
return 150;
},
label: 'min',
type: 'number'
},
{
calc: function () {
return 175;
},
label: 'avg',
type: 'number'
},
{
calc: function () {
return 200;
},
label: 'max',
type: 'number'
}
]);
var options = {
vAxis: {
viewWindow: {
min: 125,
max: 225
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
here's another example...
add additional columns to the data table,
use getColumnRange for find the min and max x-axis values
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var xAxisRange = data.getColumnRange(0);
data.addColumn({label: 'min', type: 'number'});
data.addColumn({label: 'avg', type: 'number'});
data.addColumn({label: 'max', type: 'number'});
data.addRows([
[xAxisRange.min, null, 150, 175, 200],
[xAxisRange.max, null, 150, 175, 200]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
series: {
1: {
color: 'cyan'
},
2: {
color: 'cyan'
},
3: {
color: 'cyan'
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Related

Labels on google charts are not visible in specific coonfiguration

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

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

Google Charts: How do I add a label to grouped column chart

I have a column chart produced with the "classic" corechart package.
But, I don't understand how to put the column values as labels on top of each bar. (eg. 8.50 on the very first).
Here's my code:
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

you can use the annotation column role to add labels to the bars
the annotation column should follow the series column in the data table
see following working snippet
here, a DataView is used to add annotation columns for each series...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var viewColumns = [0];
$.each(new Array(data.getNumberOfColumns() - 1), function (index) {
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, options);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
if you know the number of columns in the data table,
then you don't need to build them dynamically
the setColumns method takes an array,
each entry in the array can be a column index --> 0
or an object, if using a calculated column...
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}
in this case, we need to include the columns from the data table,
and a calculated column for each annotation column
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var view = new google.visualization.DataView(data);
view.setColumns([
0, // <-- x-axis column index
1, // <-- first y-axis column index
{ // annotation column for first y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 1); // get formatted value from first y-axis column
},
role: 'annotation',
type: 'string'
},
2, // <-- second y-axis column index
{ // annotation column for second y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 2); // get formatted value from second y-axis column
},
role: 'annotation',
type: 'string'
},
3,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 3);
},
role: 'annotation',
type: 'string'
},
4,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 4);
},
role: 'annotation',
type: 'string'
}
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, options);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTE
the reason you cannot build the columns dynamically using a regular for loop,
is because we're assigning the column index in an object
in this case, a reference is saved to i
{
calc: function (dt, row) {
return dt.getFormattedValue(row, i);
},
role: 'annotation',
type: 'string'
}
when the loop finishes and the columns are used in setColumns,
all of the columns reference i, which is the last value of the loop
to use the value of i during the loop, instead of a reference to a i
then the object being built has to be inside a closure, or function
which is why the $.each statement is used in the original answer
this creates a closure and the value of index is used,
rather than a reference to index
$.each(new Array(data.getNumberOfColumns() - 1), function (index) { // <-- this creates the closure...
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});

Google Visualization highlight single grid line

how can I highlight a single grid line? I would like to set an optical temperature limit at 35 ° C.
Thanks! I have now added it to my code, but it does not work .... do you see my mistake? Or did I not understand something in your explanation?
Here is the edited version :
//Google Chart
google.charts.load('current', {
callback: function drawChart(peanut) {
const div = document.createElement('div');
div.id = peanut.color + peanut.mac.split(':').join('');
$('#charts').appendChild(div);
peanut.data = new google.visualization.DataTable();
peanut.data.addColumn('datetime', 'Time');
peanut.data.addColumn('number', '🥜 ' + peanut.label);
for (var i = 0, len = localStorage.length; i < len; i++) {
let dateTime = new Date(parseInt(localStorage.key(i)));
let item = JSON.parse(localStorage.getItem(localStorage.key(i)));
if (item.peanutMac === peanut.mac) {
if (item.temperatureCelsius) {
let temperature = parseFloat(item.temperatureCelsius);
peanut.data.addRows([ [dateTime, temperature] ]);
} else if (item.alert) {
let data = parseInt(item.alert);
peanut.data.addRows([ [dateTime, data] ]);
}
}
}
if (peanut.type == 'thermo') {
peanut.chart = new google.visualization.LineChart($('#' + div.id));
peanut.chartOptions = {
interpolateNulls: true,
fontName: 'Roboto',
curveType: 'function',
colors: [peanut.rgbColor],
width: document.body.clientWidth,
height: (window.innerHeight - 224) / 2,
legend: 'none',
lineWidth: 3,
vAxis: {
format: '#.## °C',
ticks: [15.00, 20.00, 25.00, 30.00, 35.00, 40.00]
},
hAxis: {
gridlines: {
color: '#fff'
}
}
};
peanut.viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (colIndex) {
peanut.viewColumns.push(colIndex);
});
peanut.viewColumns.push({
calc: function () {
return 35;
},
label: 'optical temperature limit',
type: 'number'
});
}
peanut.view = new google.visualiation.DataView(data);
peanut.view.setColumns(viewColumns);
if (peanut.data.getNumberOfRows()) {
peanut.chart.draw(peanut.view, peanut.chartOptions);
}
}
packages:['corechart', 'table']
});

add another series with the value set to 35 for all rows
here, a data view is used to add a calculated column for the optical temperature limit
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y0');
data.addColumn('number', 'y1');
data.addColumn('number', 'y2');
data.addRows([
[1, 32.8, 20.8, 21.8],
[2, 30.9, 29.5, 32.4],
[3, 25.4, 27, 25.7],
[4, 21.7, 28.8, 20.5],
[5, 21.9, 27.6, 20.4]
]);
var options = {
interpolateNulls: true,
fontName: 'Roboto',
curveType: 'function',
legend: 'none',
lineWidth: 3,
vAxis: {
format: '#.## °C',
ticks: [20.00, 25.00, 30.00, 35.00, 40.00]
},
hAxis: {
gridlines: {
color: '#fff'
}
}
};
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (colIndex) {
viewColumns.push(colIndex);
});
viewColumns.push({
calc: function () {
return 35;
},
label: 'optical temperature limit',
type: 'number'
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var chart = new google.visualization.LineChart($('#chart').get(0));
chart.draw(view, options);
},
packages:['corechart', 'table']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Its not the best and safest way but I didnt find something on the google documentation:
You could use Jquery for it Ive tried it on the example from google docs and it works click
var line = $("svg g line")[4]
$(line).attr('stroke','red');

A simple way is to set the vAxis baseline to the value you want, say 35, and change the baselineColor. There is no option to change the width of this line, however, so if you need that, you should follow the suggestion above to add a series just to draw this line, and set its lineWidth.

Google chart, average line removes my other line

I have a Google combo chart that has one value as bars and one value for a line, I also wanted a line to show the average of the value of the bars, so I found code that would do that, however, when implemented my other line disappeared.
This is what my chart looked like prior.
And this is after I implemented the average line, my other line disappeared.
I don't know how to do to make them both show?
This line seems to have things to do with all of it, changing dv back to data will show how my chart looked like on the first picture, but I guess there is something more I need to change to make it all work?
chart.draw(dv, options);
Here is the code.
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Day', 'Repetitions', 'Sets'],
#foreach (var c in db.Query(Query, inputDate, endDate, baselift))
{
var totAvg = c.avg;
var allReps = c.reps;
var realAvg = (totAvg / allReps) * 100;
//Writes out the data that will be shown in the chart.
<text>['#c.date', #c.reps, #c.sets],</text>
}
]);
// Create a DataView that adds another column which is all the same (empty-string) to be able to aggregate on.
var viewWithKey = new google.visualization.DataView(data);
viewWithKey.setColumns([0, 1, {
type: 'string',
label: '',
calc: function (d, r) {
return ''
}
}])
// Aggregate the previous view to calculate the average. This table should be a single table that looks like:
// [['', AVERAGE]], so you can get the Average with .getValue(0,1)
var group = google.visualization.data.group(viewWithKey, [2], [{
column: 1,
id: 'avg',
label: 'Average',
aggregation: google.visualization.data.avg,
'type': 'number'
}]);
// Create a DataView where the third column is the average.
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, {
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);
var options = {
title: 'Daily Repetition Statistics',
backgroundColor: { fill: 'transparent' },
explorer: { axis: 'horizontal' },
vAxes: {
0: { logScale: false, viewWindow: { min: 0 } },
1: { logScale: false, maxValue: 2 }
},
hAxis: { title: 'Day' },
seriesType: 'bars',
curveType: 'function',
series: {
0: {
targetAxisIndex: 0,
color: 'orange'
},
1: { targetAxisIndex: 1 },
1: { targetAxisIndex: 1, type: "line" },
2: { targetAxisIndex: 1, type: "line" }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dv, options);
}
</script>

the column index for 'sets' is not provided to setColumns
change this...
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, {
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);
to..
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, 2, { // <-- add 'sets' column index 2
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);

Google chart show dual axis represent same data

I wanted to make a google chart which shows the dual y axis , but both should represents the same bar.
See this fiddle
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Car', 'Distance travelled'],
["mercedes", 44],
["lamborgh", 31],
["porsche", 12],
["aston martin", 10]
]);
var options = {
title: 'Car distance',
width: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
axes: {
x: {
0: { side: 'top', label: 'Car stats'} // Top x-axis.
}
},
bar: { groupWidth: "20%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have shown the Cars distance traveled , thats actually in kms, now i wanted to show the cars money spent in fuel
like a car traveled 1km and it spends $2 in fuel
now looking at the fiddle suppose we have mercedes car traveled 44km then it costs around $88 which should be depicted by the 2nd y-axis
How it can be done?

each series (y-value) in the chart represents a column in the data
"series 0" = column 1 in the data
"series 1" = column 2 in the data
then use the options to map each series to an axis...
series: {
0: { axis: 'distance' },
1: { axis: 'fuel' }
},
axes: {
y: {
distance: {label: 'Distance'},
fuel: {side: 'right', label: 'Fuel'}
}
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['bar']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Car', 'Distance travelled', 'Fuel'],
['mercedes', 44, 88],
['lamborgh', 31, 62],
['porsche', 12, 24],
['aston martin', 10, 20]
]);
var options = {
title: 'Car distance',
height: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
bar: { groupWidth: "20%" },
series: {
0: { axis: 'distance' },
1: { axis: 'fuel' }
},
axes: {
x: {
0: { side: 'top', label: 'Car stats'} // Top x-axis.
},
y: {
distance: {label: 'Distance'},
fuel: {side: 'right', label: 'Fuel'}
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
to remove the second bar but keep the axis requires a bit of manipulation
and use of options not available to material charts
see following working snippet using a core chart...
google.charts.load('current', {
callback: drawChart,
packages:['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Car', 'Distance travelled'],
['mercedes', 44],
['lamborgh', 31],
['porsche', 12],
['aston martin', 10]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
label: 'Fuel',
type: 'number',
calc: function () {
return null;
}
}]);
var options = {
title: 'Car distance',
height: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
bar: { groupWidth: "20%" },
// center bar with x-axis label
isStacked: true,
// material chart theme
theme: 'material',
// y-axis settings
vAxes: {
0: {
ticks: [0, 10, 20, 30, 40, 50],
title: 'Distance'
},
1: {
ticks: [0, 20, 40, 60, 80, 100],
title: 'Fuel'
}
},
// map series
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note
material charts --> packages:['bar'] -- google.charts.Bar
core charts --> packages:['corechart'] -- google.visualization.ColumnChart

Categories