We Keep Coding

Removing the gap between the datapoints

Graph: Number of Persons v DateTime
2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13
As we can see there is no data between 2004-12-23 15:29:01 and 2004-12-24 10:30:01 but still the Google Chart shows me a gap and connects the two datapoints when using LineChart. Also I avoid making the dates string as then I would get no yaxis markings, because of the huge date-time.
I am new to using Google Charts, can this be avoided?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', ‘Available);
data.addRows(dataPoints);
console.log(data);
var options = {
title: ‘Availability',
legend: {position: 'bottom' },
hAxis: {
title: 'Time',
/*
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}*/
},
vAxis: {
title: 'Number of people available’
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}

if you use string values, rather than date values, no gap will be displayed...
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
...
also, here, needed to add more room at the bottom of the chart for the labels,
as well as increase the default height...
chartArea: {
bottom: 128
},
height: 400
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
['2004-12-23 15:28:01', 4],
['2004-12-23 15:29:01', 4],
['2004-12-24 10:30:01', 13],
['2004-12-24 10:31:01', 12],
['2004-12-24 10:32:01', 12],
['2004-12-24 10:33:01', 13],
['2004-12-24 10:34:01', 13],
['2004-12-24 10:35:01', 13]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', 'Available');
data.addRows(dataPoints);
var options = {
title: 'Availability',
legend: {position: 'bottom'},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of people available'
},
chartArea: {
bottom: 128
},
height: 400
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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 Charts - Shared label for adjacent columns with the same value

I have a Google Chart that's showing repeated values for adjacent rows containing the same value. Is there a way to make adjacent columns share a label if the value they represent is the same?

there are no standard options to prevent annotations from repeating,
but these could be easily removed
1)
if the annotation values are loaded as part of the data,
and you don't want to change how the data is loaded
use a simple routine to set the annotations to null
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Members', {role: 'annotation'}],
['2015-09', 0, '0'],
['2015-10', 0, '0'],
['2015-11', 0, '0'],
['2015-12', 0, '0'],
['2016-01', 1, '1'],
['2016-02', 1, '1'],
['2016-03', 1, '1'],
['2015-04', 3, '3'],
['2016-05', 3, '3'],
['2016-06', 3, '3'],
['2016-07', 3, '3'],
['2016-08', 3, '3'],
['2016-09', 3, '3'],
['2016-10', 4, '4'],
['2016-11', 6, '6'],
['2016-12', 6, '6'],
['2017-01', 8, '8'],
['2017-02', 8, '8'],
['2017-03', 8, '8'],
]);
// remove repeated annotations
var annotationText = null;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (annotationText === data.getValue(i, 2)) {
data.setValue(i, 2, null);
} else {
annotationText = data.getValue(i, 2);
}
}
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
bold: true,
fontSize: 20
}
},
colors: ['#0097A7'],
hAxis: {
slantedText: true,
textStyle: {
bold: true,
fontSize: 16
}
},
height: 400,
legend: {
position: 'none'
},
vAxis: {
title: data.getColumnLabel(1)
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
2)
if the annotation values are set using a DataView,
modify the calc function to not repeat annotations
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Members'],
['2015-09', 0],
['2015-10', 0],
['2015-11', 0],
['2015-12', 0],
['2016-01', 1],
['2016-02', 1],
['2016-03', 1],
['2015-04', 3],
['2016-05', 3],
['2016-06', 3],
['2016-07', 3],
['2016-08', 3],
['2016-09', 3],
['2016-10', 4],
['2016-11', 6],
['2016-12', 6],
['2017-01', 8],
['2017-02', 8],
['2017-03', 8],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
if (row > 0) {
if (dt.getValue(row, 1) === dt.getValue(row - 1, 1)) {
return null;
}
}
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
bold: true,
fontSize: 20
}
},
colors: ['#0097A7'],
hAxis: {
slantedText: true,
textStyle: {
bold: true,
fontSize: 16
}
},
height: 400,
legend: {
position: 'none'
},
vAxis: {
title: data.getColumnLabel(1)
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Adding an image on top of line annotations in Google Line chart

Here is a code for creating a line chart. I'm trying to add an image on top of the line annotation. Here a demo on jsfiddle.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0,null, 0, 1], [1,'', 10,3], [2,null, 23,6], [3,null, 17,7], [4,null, 18,4], [5,null, 9,7]
]);
var options = {
curveType : 'function',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I really can't figure out how to do this. Any one ever done this ?

you can add elements to the chart, once the 'ready' event fires
(or 'animationfinish' when using animation)
first, need to find the annotations, which will be <rect> elements
similar to the axis lines, they will have a 'width' of 1
but they will have a different 'fill' attribute
(keep this in mind, if more style settings are set on the annotations option)
the following working snippet finds the annotation lines and adds an image to the top
google.charts.load('current', {
callback: drawBasic,
packages: ['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, null, 0, 1],
[1, '', 10, 3],
[2, null, 23, 6],
[3, null, 17, 7],
[4, null, 18, 4],
[5, null, 9, 7]
]);
var options = {
annotations: {
position: 'top',
style: 'line'
},
hAxis: {
gridlines: {
color: 'transparent'
},
title: 'Time'
},
vAxis: {
gridlines: {
color: 'transparent'
},
title: 'Popularity'
},
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) {
var xPos = parseFloat(rect.getAttribute('x'));
var yPos = parseFloat(rect.getAttribute('y'));
var whiteHat = container.appendChild(document.createElement('img'));
whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
whiteHat.className = 'whiteHat';
// 16x16 (image size in this example)
whiteHat.style.top = (yPos - 8) + 'px';
whiteHat.style.left = (xPos) + 'px';
}
});
});
chart.draw(data, options);
}
.whiteHat {
border: none;
position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Add 'role': 'tooltip', 'p': {'html': true}}); in your data.addColumn and
in the options use: tooltip: { isHtml: true }.
HTML:
<div id="chart"></div>
JavaScript:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addColumn('number', 'Line 2');
data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]);
data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]);
data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]);
data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]);
data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]);
var options = {
title: 'Graph',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
},
tooltip: {isHtml: true},
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
See in JsFiddle.

google charts html tooltip issue

When I select one point at chart, tooltip html content is correct, but when select 2 and more points, tooltips merge in one and html of each one is visible. Are smbd know what i do wrong ? Can smbd help me ?
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number' , "id");
data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var dataArray = [];
tooltipContent = "<div class='google-chart-tooltip'><center class='google-chart-tooltip-date'>Date: " + date + "</center><br /><p>Value1: " + value1 + ";<br />Value2: " + value2 + ".</p></div>";
//fill dataArray
data.addRows(dataArray);
}
var currentChartOptions = {
tooltip: {
isHtml: true,
trigger: 'selection'
},
selectionMode: 'multiple',
interpolateNulls: true,
hAxis: {
title: 'Time'
},
vAxis: {
title: "Values"
}
};
Follows an image of the issue:

looks like a bug, from what i can tell, code looks fine
there are no missing options or anything like that
and it is easily replicated, as in the following example
you could use aggregationTarget: 'none' to force each tooltip to be shown separately
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number' , 'id');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
var dataArray = [
[new Date(2016, 11, 18), 1000, 400],
[new Date(2016, 11, 19), 1170, 1170],
[new Date(2016, 11, 20), 660, 1120],
[new Date(2016, 11, 21), 1030, 540]
];
dataArray.forEach(function (row) {
data.addRow([
row[0],
row[1],
'<div class="google-chart-tooltip"><center class="google-chart-tooltip-date">Date: ' + row[0] + '</center><br /><p>Value1: ' + row[1] + ';<br />Value2: ' + row[2] + '.</p></div>'
]);
});
var currentChartOptions = {
aggregationTarget: 'none',
tooltip: {
isHtml: true,
trigger: 'selection'
},
selectionMode: 'multiple',
interpolateNulls: true,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Values'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, currentChartOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>