Related
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>
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
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'
},
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>
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.