Google Timeline Chart Go to position on redraw - javascript

When a chart is drawn, it scrolls to the top but I am trying to make the chart stay on the same place at redraw. Because I cannot see the source code, I tried to get the scroll position and scroll to it on redraw but it does not work. Can someone please help me or is there a better way of doing it. Thank you.
<div class="row">
<div class="col-12">
<div id="timelineDiv">
<div class="text-center">
<p class="mes">{{timelinecontr.mess}}</p>
</div>
<div class="col-12">
<div id="timeline" class="chart"></div>
</div>
</div>
</div>
</div>
#timelineDiv{
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
border: 13px solid #bed5cd;
width: 100%;
margin: 0 auto;
position: relative;
background-color: deepskyblue;
height: 550px;
}
timelinecontr.pos = $('#timeline div').scrollTop(); // position
$('#timeline div').scrollTop(timelinecontr.pos) // this is called on chart redraw

need to wait until the chart has finished drawing before setting the scroll position
before drawing the chart, get the scroll position
when the chart's 'ready' event fires, set the scroll position
var rowHeight = 42;
var timelinePos;
google.visualization.events.addListener(chart, 'ready', function () {
$('#timeline').scrollTop(timelinePos);
});
function drawChart() {
timelinePos = $('#timeline').scrollTop();
chart.draw(dataTable, {
height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight
});
}
note: if no height option is set on the chart, the timeline will use its own scrollbar
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ],
[ '2', 'B', new Date(2012, 2, 4), new Date(2013, 3, 30) ],
[ '3', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ],
[ '4', 'D', new Date(2014, 2, 4), new Date(2015, 2, 4) ],
[ '5', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ],
[ '6', 'F', new Date(2016, 2, 4), new Date(2017, 2, 4) ],
[ '7', 'G', new Date(2017, 2, 4), new Date(2018, 2, 4) ],
[ '8', 'H', new Date(2018, 2, 4), new Date(2019, 2, 4) ],
[ '9', 'I', new Date(2019, 2, 4), new Date(2020, 2, 4) ],
[ '0', 'J', new Date(2020, 2, 4), new Date(2021, 2, 4) ]
]);
var rowHeight = 42;
var timelinePos;
google.visualization.events.addListener(chart, 'ready', function () {
$('#timeline').scrollTop(timelinePos);
});
function drawChart() {
timelinePos = $('#timeline').scrollTop();
chart.draw(dataTable, {
height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight
});
}
$('#draw-chart').on('click', drawChart);
$(window).resize(drawChart);
drawChart();
},
packages: ['timeline']
});
#timeline {
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
border: 13px solid #bed5cd;
width: 100%;
margin: 0 auto;
position: relative;
background-color: deepskyblue;
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>
<button id="draw-chart">Draw Chart</button>

Related

Transforming DataTable to Google Spreadsheet

I have made a simple timetable using Google Charts, although right now i use DataTable inside the code. Instead i want to use Google Spreadsheet as the source.
But i am struggling even though i follow https://developers.google.com/chart/interactive/docs/spreadsheets. I dont quite understand in which format should my datas be in the spreadsheet (such as columns and rows)
Here is the code:
<head>
<h1>Vehicle Plan Time Table</h1>
<style>
h1 {
color: #3e74ab;
text-shadow: 1px 1px;
font-family: "Times New Roman", Times, serif;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timechart');
var chart = new google.visualization.Timeline(container);
var options = {
colors: ['#113477', '#C0C0C0','#adc6e5', '#72aae4','#518cc2','#4A7FB0'],
timeline: { rowLabelStyle: {fontName: 'Arial', fontSize: 20, color: '#0000' },
barLabelStyle: { fontName: 'Times New Roman', fontSize: 25 } },
'width':2650,
'height':1200,
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ Date(), 'Now', new Date(), new Date()],
[ 'Project #1', 'F2', new Date(2022, 10, 30), new Date(2022, 11, 30) ],
[ 'Project #1', 'F3', new Date(2022, 11, 30), new Date(2023, 5, 17) ],
[ 'Project #1', 'F3.1', new Date(2023, 5, 17), new Date(2023, 9, 29) ],
]);
chart.draw(dataTable,options);
nowLine('timeline');
google.visualization.events.addListener(chart, 'onmouseover', function(obj){
if(obj.row == 0){
$('.google-visualization-tooltip').css('display', 'none');
}
nowLine('timeline');
})
google.visualization.events.addListener(chart, 'onmouseout', function(obj){
nowLine('timeline');
})
}
function nowLine(div){
var height;
$('#' + div + ' rect').each(function(index){
var x = parseFloat($(this).attr('x'));
var y = parseFloat($(this).attr('y'));
if(x == 0 & y == 0) {height = parseFloat($(this).attr('height'))}
})
var nowWord = $('#' + div + ' text:contains("Now")');
nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
}
</script>
<div id="timechart" style="height: 400px;"></div>

(Google Charts) How to make stacked column charts work with hours, minutes and seconds?

I am trying to sum the minutes of two bars on a bar chart and it breaks. jsfiddle
I'm basing myself on the example from the Stacked column charts, but I can't get it to work with "H: i: s"
this is my code
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('visualization', '1.0', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dtos= [];
var data = google.visualization.arrayToDataTable([
['','preparation time ', 'time when he retired',
{ role: 'annotation' } ],
['box 1', '00:43:22', '00:03:22', ''],
['box 2', '00:13:22', '00:73:22' , ''],
['box 3', '00:23:22', '00:53:22', '']
]);
var options = {
height: 350,
isStacked: true
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
//chart.draw(data, options);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
return {
init: function() {
_googleColumnBasic();
}
}
}();
GoogleColumnBasic.init();
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
thanks.
you can use a 'timeofday' column, see working with timeofday.
The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date. For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same timeofday value).
the data table used to draw the chart would be similar to the following...
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
see following working snippet...
var GoogleColumnBasic = function() {
var _googleColumnBasic = function() {
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
['Caja 1', [0, 43, 22], [0, 3, 22], ''],
['Caja 2', [0, 13, 22], [0, 73, 22], ''],
['caja 3', [0, 23, 22], [0, 53, 22], '']
]);
var options = {
height: 350,
isStacked: true,
colors: ['#4285f4', '#a1c2fa'],
theme: 'material',
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, (options));
}
}
return {
init: _googleColumnBasic
}
}();
GoogleColumnBasic.init();
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart_div {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTES
the jsapi loader has been deprecated and should no longer be used.
instead, use the new loader.js
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, see above snippet.
do not recommend using a material chart. (google.charts.Bar)
they do not work well with 'timeofday' columns,
they do not support column roles such as 'annotation',
AND many of the chart options simply do not work, see Tracking Issue for Material Chart Feature Parity
instead, we can use option --> theme: 'material' on a classic chart (google.visualization.ColumnChart)

Google Bar chart take full width

I have a google chart that I need to take the full width of the chart area, how can I do it? As you can see in the picture above it doesn't´t take neither the full width or hight.
My option right now are:
var options = {
title: 'Baterry Packs Voltages',
legend: { position: 'none' },
hAxis: { title: 'Pack', viewWindow: { min: 0, max: 13 }, gridlines: { count: 0 }, ticks: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ] },
vAxis: { title: 'Pack Voltage [V]', viewWindow: { min: 0, max: 5 }, gridlines: { count: 10 }, ticks: [0, 1, 2, 3, 4, 5] },
chartArea: { left: '8%', top: '8%', width: "70%", height: "70%" },
height: 450,
width: 700
};
here are a couple options...
1)
use option --> theme: 'maximized'
this will expand the chart area to the edges of the container
and place all labels, including titles, inside the chart area
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var formatDate = new google.visualization.DateFormat({
pattern: 'dd/MM'
});
var oneDay = (1000 * 60 * 60 * 24);
var startDate = new Date(2017, 0, 16);
var endDate = new Date();
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Value');
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
dataTable.addRow([
new Date(i),
(2 * ((i - startDate.getTime()) / oneDay) + 8)
]);
}
var chartColumn = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-line',
dataTable: dataTable,
options: {
theme: 'maximized'
}
});
chartColumn.draw();
}
<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-line"></div>
2)
manually size the chart and the chart area...
here, room is left on the edges (top, right, bottom, left)
for the various labels...
chartArea: {
top: 12,
right: 12,
bottom: 24,
left: 24,
height: '100%',
width: '100%'
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var formatDate = new google.visualization.DateFormat({
pattern: 'dd/MM'
});
var oneDay = (1000 * 60 * 60 * 24);
var startDate = new Date(2017, 0, 16);
var endDate = new Date();
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Value');
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
dataTable.addRow([
new Date(i),
(2 * ((i - startDate.getTime()) / oneDay) + 8)
]);
}
var chartColumn = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-line',
dataTable: dataTable,
options: {
chartArea: {
top: 12,
right: 12,
bottom: 24,
left: 24,
height: '100%',
width: '100%'
}
}
});
chartColumn.draw();
}
<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-line"></div>

A way to set custom start and end time for Google Timeline Chart

Couldn't find answer in the official documentation.
By default, Google Timeline "shrinks" the chart area, so that first bar touches the left edge, and last bar touches the right:
|XXXXX-----YYYY---------|
|----ZZZ---YYYY----AAAAA|
Apr May Jun Jul
I want to override this behaviour and manually set start and end time for chart (override the scale), like this:
|------------XXXXX-----YYYY----------------|
|---------------ZZZ----YYYY-----AAAAA------|
Jan Feb Mar Apr May Jun Jul Aug
In my example, I want to show the chart from January till August.
listed in the Release Notes from October 2, 2015
use options hAxis.minValue & hAxis.maxValue
hAxis: {
minValue: new Date(2017, 0, 1),
maxValue: new Date(2017, 7, 1)
}
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'A', new Date(2017, 1, 1), new Date(2017, 1, 10) ],
[ '2', 'B', new Date(2017, 3, 1), new Date(2017, 3, 10) ],
[ '3', 'C', new Date(2017, 5, 1), new Date(2017, 5, 10) ],
]);
function drawChart() {
chart.draw(dataTable, {
hAxis: {
minValue: new Date(2017, 0, 1),
maxValue: new Date(2017, 7, 1)
}
});
}
$(window).resize(drawChart);
drawChart();
},
packages: ['timeline']
});
<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>

how to customize Google Chart calendar?

I want to add comment in Google chart (calendar chart).
but, I don't understand Google chart's options and How to use.
when I add addcolumn, This work can not.
Please give me some help..
enter image description here
<<<source code>>>>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
// dataTable.addColumn({ type: 'string', id:'comment'}); // Error
dataTable.addRows([
[ new Date(2015, 3, 11), 4], // I want to add comment
[ new Date(2015, 3, 12), 3],
[ new Date(2015, 3, 10), 8],
[ new Date(2015, 1, 13), 5],
[ new Date(2015, 3, 14), 7]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 1050,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
enter code here
Are you trying to get your comment to appear in a tooltip? How would you like to see the comment information rendered?

Categories