Google Chart hAxis Title - google-visualization

options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}},
I have this as my options for my google column chart but this displays "Division" on both my vertical and horizontal axis and removes all the labels on the hAxis. Can anyone tell me why this is happening?

is there more you can share?
seems to work fine here...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}}
}).draw();
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Always show lines or bars shadows in google charts

Is there any way to always show shadows on line or bar google chart?.
I've tried searching solutions with css, svg, rect and g but no luck.
basically, line shadow should be same as they are shown when hovered over legend.
Thanks,
Ivan
there are no configuration options or settings, specifically for a shadow
but using a style column role, it is possible to add a semi-transparent border
see following working snippet,
a data view is used to apply a style to every other row
(so you can see the difference from the normal style)
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'y0');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var columnStyle = '';
if (row % 2 === 0) {
columnStyle = 'fill-color: #f44336; stroke-color: #d50000; stroke-opacity: 0.35; stroke-width: 5;';
}
return columnStyle;
},
role: 'style',
type: 'string'
}]);
var container = document.getElementById('chart-column');
var chartColumn = new google.visualization.ColumnChart(container);
var options = {
chartArea: {
bottom: 24,
left: 36,
right: 16,
top: 24,
width: '100%',
height: '100%'
},
colors: ['#f44336'],
height: '100%',
legend: {
position: 'none'
},
width: '100%'
};
window.addEventListener('resize', function () {
chartColumn.draw(view, options);
});
chartColumn.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-column"></div>

How to create color gradient on Google Visualization Line Chart

I am creating a Google line chart as per Google Line Chart Documentation.
I want to style the colour of the line such that it is a gradient between two colours, say between Green and Red. The weighting of each colour should be controlled by the 'y' value of the line.
i.e. at the point where the line's 'y' value is 0, the line will be completely green, At the highest 'y' value on the it should be completely red. In between values should have a weighting depending on the value of y at that point.
Is this possible? If so, how?
Since Google Line Chart is SVG based, you could customize how the line can change from one color to another via linearGradient element.
The below example shows how to inject [linearGradient element] into the chart (google.visualization.LineChart):
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 60], [64, 50], [65, 45],
[66, 40], [67, 42], [68, 35], [69, 30]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
addChartGradient(chart);
});
chart.draw(data, options);
}
function addChartGradient(chart) {
var chartDiv = chart.getContainer();
var svg = chartDiv.getElementsByTagName('svg')[0];
var properties = {
id: "chartGradient",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
stops: [
{ offset: '5%', 'stop-color': '#f60' },
{ offset: '95%', 'stop-color': '#ff6' }
]
};
createGradient(svg, properties);
var chartPath = svg.getElementsByTagName('path')[1]; //0 path corresponds to legend path
chartPath.setAttribute('stroke', 'url(#chartGradient)');
}
function createGradient(svg, properties) {
var svgNS = svg.namespaceURI;
var grad = document.createElementNS(svgNS, 'linearGradient');
grad.setAttribute('id', properties.id);
["x1","y1","x2","y2"].forEach(function(name) {
if (properties.hasOwnProperty(name)) {
grad.setAttribute(name, properties[name]);
}
});
for (var i = 0; i < properties.stops.length; i++) {
var attrs = properties.stops[i];
var stop = document.createElementNS(svgNS, 'stop');
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') ||
svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
return defs.appendChild(grad);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
JSFiddle

How to use vAxis.direction to reverse the order of google graph

I guess I can reverse the order of vertical axis of a graph using vAxis.direction by setting it to -1. But I am just learning and confused with the way to write it.
Here is the current graph:
I want to reverse order the vertical axis with 0 at top and 80 at origin.
Here is the existing code:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Plese suggest how can I set vAxis.direction to -1. I tried a few code but of no help.
try adding a line to your vAxis properties:
vAxis: {
title: 'Popularity',
direction: '-1'
},

How to make a custom tooltip for each series in Google Line Chart

I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>

how to connect selected points in scatter plot in google api

I'm using scatter plot for my application, so I selected google API for scatter charts. For my application I need to connect some points with line marker. I followed this
link for test. please help me to improve.
If you need to connect points on your ScatterChart, you can do so by setting either the lineWidth option (creates lines connecting points for all data series) or the series.<series index>.lineWidth option (which creates lines connecting the points of a single series). Here are some examples:
Use the lineWidth option to connect points in all series (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
lineWidth: 1
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
Connect all the points in one data series using the series.<series index>.lineWidth option (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
If you want to connect only certain points in a data series, you must insert null values between all points that you do not want lines to connect. Here's an example connecting points (2, 5) and (3, 6) in series Y1 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[null, null, null],
[1, 6, 6],
[null, null, null],
[2, 5, 9],
[3, 6, 5],
[null, null, null],
[4, 5, 4],
[null, null, null],
[7, 9, 2],
[null, null, null],
[8, 4, 6],
[null, null, null],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
The important thing to note here is that points which are adjacent in the DataTable will be connected with lines. If you want to connect points which are not adjacent in the chart, you need to re-arrange the data. Here's an example that connects the points (2, 5) and (8, 4) in Y1 and (4, 4) and (8, 6) in Y2 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[null, null, null],
// Y1 data
// make (2, 5) and (8, 4) adjacent in the DataTable
[2, 5, null],
[8, 4, null],
// split all others with nulls
[null, null, null],
[0, 2, null],
[null, null, null],
[1, 6, null],
[null, null, null],
[3, 6, null],
[null, null, null],
[4, 5, null],
[null, null, null],
[7, 9, null],
[null, null, null],
[9, 3, null],
// Y2 data
// make (4, 4) and (8, 6) adjacent in the DataTable
[4, null, 4],
[8, null, 6],
// split all others with nulls
[null, null, null],
[0, null, 5],
[null, null, null],
[1, null, 6],
[null, null, null],
[2, null, 9],
[null, null, null],
[3, null, 5],
[null, null, null],
[7, null, 2],
[null, null, null],
[9, null, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
},
1: {
// connect the points in Y2 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
That should get you started on connecting points with lines in ScatterCharts.