We Keep Coding

Google chart: increase margin between x axis labels and x-axis

I am using angular-google-chart (https://github.com/FERNman/angular-google-charts) an angular wrapper for google-chart to display a column chart. I want to increase the margin between the x-axis labels and the x-axis.
In the picture below, the red part indicates where I want to increase the gap
Following the documentation, I added this code:
options: {
...
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
},
...
The color, font-size, and font-style is working, but can not get the margin gap. Any ideas? Thanks in advance.

use chartArea.bottom to increase the space on the x-axis
options: {
...
chartArea: {
bottom: 60
},
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
},
...
EDIT
although you can use bottom to increase the height of the x-axis,
the labels still align to the top of the x-axis.
but we can move them down manually, on the chart's 'ready' event,
by increasing the 'y' attribute,
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[[8, 0, 0], 46],
[[9, 0, 0], 46],
[[10, 0, 0], 34],
[[11, 0, 0], 4],
[[12, 0, 0], 5],
[[13, 0, 0], 6],
[[14, 0, 0], 7],
[[15, 0, 0], 8],
[[16, 0, 0], 9],
[[17, 0, 0], 10],
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 24,
left: 60,
right: 16,
bottom: 100
},
height: '100%',
width: '100%',
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
}
});
});
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: bottom was added during release 43, on Oct. 2, 2015

How to disable hover state in google chart column?

I would like to know what is other option that I need to disabled the hover state of my column bar. I try this code
'tooltip' : {
trigger: 'none'
}
this doesn't work.
I only have a simple code here
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Phase', 'Sales', 'Expenses', 'Profit'],
['1', 20, 40, 70],
['2', 90, 75, 50],
['3', 20, 40, 10],
['4', 30, 75, 80],
['5', 100, 75, 50],
['6', 50, 90, 50],
['7', 100, 75, 20],
['8', 40, 30, 50],
]);
var options = {
tooltip: { trigger: 'none'},
bars: 'vertical',
vAxis: {format: 'decimal'},
enableInteractivity: false,
height: 400,
colors: ['#ac226d', '#016ac6', '#fff'],
backgroundColor: '',
legend: { position: "none" },
bar: {groupWidth: "15%"},
hAxis: {
textStyle:{color: '#FFF'}
},
series: {
lineWidth: 10
},
vAxis: {
textStyle:{color: '#FFF'},
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
I try to search it, but the only answer that I find is the trigger:none.

look at this:
Tooltips | Charts | Google Developers
you can add column with rol tooltip and empty it.

Try setting this option:
var options = {
enableInteractivity: false
}

Google Charts upside-down area chart

How to create an area chart which has both normal area and "upside-down" area?
Already looked at their docs, but didn't find a solution there.
The end result should look like this:
You can see my current status in this jsfiddle.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Blue', 'Red'],
['0', 0, 20],
['2', 0, 20],
['4', 0, 20],
['6', 1, 19],
['8', 2, 18],
['10', 3, 17],
['12', 4, 16],
['14', 5, 15],
['16', 6, 14],
['18', 7, 13],
['20', 8, 12],
['22', 9, 11],
['24', 10, 10]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

The Google Charts AreaChart fills the area from the data line down or up to the baseline. But baselines (currently) only apply to axes, and you effectively want two different baselines, one at the top for one series and one at the bottom for the other series, so you'll have to do some trickery to get what you want.
Basically, target each series to a different axis, each with its own baseline, and align the two axes with the same viewWindow. Like so:
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxes: {
0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
},
series: {
1: { targetAxisIndex: 1 }
}
};
See the update to your jsfiddle.

How do I remove non-integers in the axis of a plotly.js graph?

return {
height: 210,
title: title,
autosize: true,
width: '100%',
font: {
size: 10,
family: "Roboto"
},
showlegend: false,
margin: {
l: 40,
r: 10,
b: 35,
t: 22,
pad: 0
},
xaxis: {
nticks: 6,
title: "Score",
linecolor: '#cccccc',
zerolinewidth: 0,
zerolinecolor: '#fff'
},
yaxis: {
title: "Number of students",
linecolor: '#cccccc',
zerolinewidth: 0,
zerolinecolor: '#eeeeee',
range: [0, numStudents]
},
bargap: 0.5
};
This is including half steps as well 1.5 and so on. I am using plotly.js and this is what I see:

You can force Plotly to use defined distances between the axis' ticks by setting dtick in the layout options of your axis, i.e. in your case it would be
{yaxis: {dtick: 1}}
See below for an example of no layout settings vs fixed dtick.
var trace1 = {
x: ['A', 'B', 'C'],
y: [1, 3, 2],
mode: 'markers',
type: 'bar'
};
Plotly.newPlot('myPlot1', [trace1], {yaxis: {dtick: 1}});
Plotly.newPlot('myPlot2', [trace1]);
<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>
<div id = "myPlot1" ></div>
<div id = "myPlot2" ></div>

Google Charts - Full width for line chart

I use combo google chart to display my data and goals on the graph like this:
I want to display goal lines on a full width of the graph, like this:
Here is what I've tried but with no luck:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {'width': '90%', 'height': '80%'},
colors: ["blue", "green"],
legend: { position: 'bottom' },
vAxis: {title: ""},
hAxis: {title: ""},
seriesType: "bars",
series: {2: {type: "line", visibleInLegend: false, color: "red"}, 3:{type: "line", visibleInLegend: false, color: "red"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
How can I achieve this?

To extend the lines to the edge of the chart, you have to use a continuous type axis, and extend your data set by one row before and after your existing data. You can use a DataView to convert your string labels to formatted numbers, and then use the hAxis.ticks option to set the axis labels:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['', null, null, 30, 60],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60],
['', null, null, 30, 60]
]);
var ticks = [];
// ignore the first and last rows
for (var i = 1; i < data.getNumberOfRows() - 1; i++) {
ticks.push({v: i, f: data.getValue(i, 0)});
}
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row, f: dt.getValue(row, 0)};
}
}, 1, 2, 3, 4]);
var range = view.getColumnRange(0);
var offset = 0.5; // change this value to adjust the padding to the left and right of the columns in the chart
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(view, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {
width: '90%',
height: '80%'
},
colors: ["blue", "green"],
legend: {
position: 'bottom'
},
vAxis: {
title: ""
},
hAxis: {
title: "",
ticks: ticks,
viewWindow: {
min: range.min + offset,
max: range.max - offset
},
gridlines: {
// hide vertical gridlines to match discrete chart display
color: 'transparent'
}
},
seriesType: "bars",
series: {
2: {
type: "line",
visibleInLegend: false,
color: "red"
},
3:{
type: "line",
visibleInLegend: false,
color: "red"
}
}
});
}
see working example here: http://jsfiddle.net/asgallant/J2u3n/